From f7140e85867280ffabdcb1cc2d9b5a5791c5b6a7 Mon Sep 17 00:00:00 2001
From: Luke Street <luke@street.dev>
Date: Sun, 7 Sep 2025 20:22:35 -0600
Subject: [PATCH] Style updates

---
 webview/views/DataView.module.css     | 29 +++++++--------------------
 webview/views/DataView.tsx            | 24 ++++++++--------------
 webview/views/FunctionView.module.css |  2 +-
 3 files changed, 16 insertions(+), 39 deletions(-)

diff --git a/webview/views/DataView.module.css b/webview/views/DataView.module.css
index 3cc7b50..2d529fa 100644
--- a/webview/views/DataView.module.css
+++ b/webview/views/DataView.module.css
@@ -1,41 +1,26 @@
 .data-row {
-  display: flex;
-  align-items: center;
-  font-family: var(--vscode-editor-font-family, monospace);
-  font-size: var(--vscode-editor-font-size, 13px);
-  line-height: 1.5;
+  font-family: var(--code-font-family);
+  font-size: var(--code-font-size);
   white-space: pre;
   cursor: default;
   padding: 0 8px;
+  text-wrap: nowrap;
+  overflow: hidden;
 }
 
 .combined-row {
   display: flex;
-  width: 100%;
 }
 
-.data-row:hover {
-  background-color: var(--vscode-list-hoverBackground);
+.diff-any {
+  background-color: rgba(255, 255, 255, 0.03);
 }
 
 .address {
-  color: var(--vscode-descriptionForeground);
+  color: var(--line-number-foreground);
   margin-right: 8px;
 }
 
-.hex-bytes {
-  margin-right: 8px;
-}
-
-.separator {
-  color: var(--vscode-descriptionForeground);
-  margin: 0 4px;
-}
-
-.ascii-chars {
-  color: var(--vscode-foreground);
-}
-
 .replace {
   color: var(--color-blue);
 }
diff --git a/webview/views/DataView.tsx b/webview/views/DataView.tsx
index 1c6ff58..1b40ff1 100644
--- a/webview/views/DataView.tsx
+++ b/webview/views/DataView.tsx
@@ -1,5 +1,6 @@
 import styles from './DataView.module.css';
 
+import clsx from 'clsx';
 import { type diff, display } from 'objdiff-wasm';
 import { memo, useCallback, useMemo } from 'react';
 import { FixedSizeList, areEqual } from 'react-window';
@@ -55,6 +56,9 @@ const DataRow = ({
   }
 
   const dataRow = display.displayDataRow(obj, symbol.info.id, row);
+  const anyDiff =
+    dataRow.segments.some((s) => s.kind !== 'none') ||
+    dataRow.relocations.some((r) => r.kind !== 'none');
   const out: React.ReactNode[] = [];
 
   // Display address
@@ -172,25 +176,13 @@ const DataRow = ({
     }
   }
 
-  out.push(
-    <span key="hex" className={styles.hexBytes}>
-      {hexBytes}
-    </span>,
-  );
-  out.push(
-    <span key="sep" className={styles.separator}>
-      {' '}
-    </span>,
-  );
-  out.push(
-    <span key="ascii" className={styles.asciiChars}>
-      {asciiChars}
-    </span>,
-  );
+  out.push(<span key="hex">{hexBytes}</span>);
+  out.push(<span key="sep"> </span>);
+  out.push(<span key="ascii">{asciiChars}</span>);
 
   return (
     <div
-      className={styles.dataRow}
+      className={clsx(styles.dataRow, anyDiff && styles.diffAny)}
       onContextMenu={onContextMenuMemo}
       {...tooltipProps}
     >
diff --git a/webview/views/FunctionView.module.css b/webview/views/FunctionView.module.css
index dc6423d..cb99239 100644
--- a/webview/views/FunctionView.module.css
+++ b/webview/views/FunctionView.module.css
@@ -28,7 +28,7 @@
 }
 
 .diff-any {
-  background-color: rgba(255, 255, 255, 0.02);
+  background-color: rgba(255, 255, 255, 0.03);
 }
 
 .segment-dim {