From d9c62964dd6adc6fbefb3797508322f4f1e417b8 Mon Sep 17 00:00:00 2001
From: colin-grant-work <colin.grant@ericsson.com>
Date: Tue, 9 Jul 2024 08:08:11 -0600
Subject: [PATCH 1/2] Reduce hit target of More Memory loader (#143)

Ensures that user must hover text
to avoid accidental interactions
---
 src/webview/components/memory-table.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/webview/components/memory-table.tsx b/src/webview/components/memory-table.tsx
index d3a0493..2ae4916 100644
--- a/src/webview/components/memory-table.tsx
+++ b/src/webview/components/memory-table.tsx
@@ -468,7 +468,7 @@ export class MemoryTable extends React.PureComponent<MemoryTableProps, MemoryTab
 
         if (this.props.memory !== undefined) {
             const prependScrollingBehaviors: ScrollingBehavior[] = ['Grow', 'Auto-Append'];
-            memorySelect = <div className='flex-auto'>
+            memorySelect = <div className='flex flex-auto justify-content-center'>
                 <MoreMemorySelect
                     activeReadArguments={this.props.activeReadArguments}
                     options={[128, 256, 512]}
@@ -499,7 +499,7 @@ export class MemoryTable extends React.PureComponent<MemoryTableProps, MemoryTab
         let memorySelect: React.ReactNode | undefined;
 
         if (this.props.memory !== undefined) {
-            memorySelect = <div className='flex-auto'>
+            memorySelect = <div className='flex flex-auto justify-content-center'>
                 <MoreMemorySelect
                     activeReadArguments={this.props.activeReadArguments}
                     options={[128, 256, 512]}

From b20f07c5f37cbddbbf055d455880a478a7ce8a89 Mon Sep 17 00:00:00 2001
From: colin-grant-work <colin.grant@ericsson.com>
Date: Tue, 9 Jul 2024 08:13:02 -0600
Subject: [PATCH 2/2] Increase group gap (#142)

Gap between groups 2px -> 4px
---
 media/memory-table.css              | 2 +-
 src/webview/columns/data-column.tsx | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/media/memory-table.css b/media/memory-table.css
index 476dfb6..db7899b 100644
--- a/media/memory-table.css
+++ b/media/memory-table.css
@@ -165,7 +165,7 @@
 
 .byte-group {
   font-family: var(--vscode-editor-font-family);
-  margin-right: 2px;
+  margin-right: 4px;
   padding: 0 1px; /* we use this padding to balance out the 2px that are needed for the editing */
 }
 
diff --git a/src/webview/columns/data-column.tsx b/src/webview/columns/data-column.tsx
index 4a929c2..2a01341 100644
--- a/src/webview/columns/data-column.tsx
+++ b/src/webview/columns/data-column.tsx
@@ -226,8 +226,8 @@ export class EditableDataColumnRow extends React.Component<EditableDataColumnRow
 
 export namespace DataColumn {
     export namespace Styles {
-        // `margin-right: 2px` per group (see memory-table.css)
-        export const MARGIN_RIGHT_PX = 2;
+        // `margin-right: 4px` per group (see memory-table.css)
+        export const MARGIN_RIGHT_PX = 4;
         // `padding: 0 1px` applies 1px right and left per group (see memory-table.css)
         export const PADDING_RIGHT_LEFT_PX = 2;
     }