From b731400c9642c655b8d74b572ce732681d472fc6 Mon Sep 17 00:00:00 2001
From: Luke Street <luke@street.dev>
Date: Sun, 7 Sep 2025 20:41:51 -0600
Subject: [PATCH] Fix one-column data view

---
 webview/views/DataView.module.css | 10 +++++++++-
 webview/views/DataView.tsx        | 31 +++++++------------------------
 2 files changed, 16 insertions(+), 25 deletions(-)

diff --git a/webview/views/DataView.module.css b/webview/views/DataView.module.css
index 2d529fa..9caf53b 100644
--- a/webview/views/DataView.module.css
+++ b/webview/views/DataView.module.css
@@ -1,9 +1,17 @@
 .data-row {
+  display: flex;
+  flex-direction: row;
+}
+
+.data-cell {
+  flex: 1 0 0;
   font-family: var(--code-font-family);
+  font-weight: var(--code-font-weight);
   font-size: var(--code-font-size);
+  font-variant-ligatures: var(--code-font-variant-ligatures);
   white-space: pre;
   cursor: default;
-  padding: 0 8px;
+  padding: 0 4px;
   text-wrap: nowrap;
   overflow: hidden;
 }
diff --git a/webview/views/DataView.tsx b/webview/views/DataView.tsx
index 1b40ff1..d644093 100644
--- a/webview/views/DataView.tsx
+++ b/webview/views/DataView.tsx
@@ -26,7 +26,7 @@ export const {
   useContextMenu: useDataContextMenu,
 } = createContextMenu<DataTooltipContent>();
 
-const DataRow = ({
+const DataCell = ({
   obj,
   symbol,
   row,
@@ -182,7 +182,7 @@ const DataRow = ({
 
   return (
     <div
-      className={clsx(styles.dataRow, anyDiff && styles.diffAny)}
+      className={clsx(styles.dataCell, anyDiff && styles.diffAny)}
       onContextMenu={onContextMenuMemo}
       {...tooltipProps}
     >
@@ -191,10 +191,7 @@ const DataRow = ({
   );
 };
 
-const DataRowMemo = memo(DataRow);
-
-// Row renderer for combined view
-const CombinedRowRenderer = memo(
+const DataRow = memo(
   ({
     index,
     style,
@@ -207,23 +204,9 @@ const CombinedRowRenderer = memo(
   }>) => {
     const { leftObj, leftSymbol, rightObj, rightSymbol } = data;
     return (
-      <div style={style} className={styles.combinedRow}>
-        <div style={{ width: '50%' }}>
-          <DataRowMemo
-            obj={leftObj}
-            symbol={leftSymbol}
-            row={index}
-            column={0}
-          />
-        </div>
-        <div style={{ width: '50%' }}>
-          <DataRowMemo
-            obj={rightObj}
-            symbol={rightSymbol}
-            row={index}
-            column={1}
-          />
-        </div>
+      <div style={style} className={styles.dataRow}>
+        <DataCell obj={leftObj} symbol={leftSymbol} row={index} column={0} />
+        <DataCell obj={rightObj} symbol={rightSymbol} row={index} column={1} />
       </div>
     );
   },
@@ -313,7 +296,7 @@ export const DataList = ({
       onScroll={onScrollMemo}
       initialScrollOffset={initialScrollOffset}
     >
-      {CombinedRowRenderer}
+      {DataRow}
     </FixedSizeList>
   );
 };