From b1c276b803cc1f6640acf532970dee68079d194d Mon Sep 17 00:00:00 2001
From: Yukon <126093594+baseGame@users.noreply.github.com>
Date: Wed, 30 Sep 2026 12:19:36 +0800
Subject: [PATCH 1/2] Hide Hex wrap-controls strip toward capture chrome

Capture goes from path meta straight into the hex grid, so keep the
extra wrap/offset strip in the DOM for tests but hide it from layout.
---
 src/styles/hexChromeDensity.test.ts | 7 +++++++
 src/styles/main.css                 | 1 +
 src/views/HexCompareView.vue        | 2 +-
 3 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/styles/hexChromeDensity.test.ts b/src/styles/hexChromeDensity.test.ts
index ceee59ce..be32194d 100644
--- a/src/styles/hexChromeDensity.test.ts
+++ b/src/styles/hexChromeDensity.test.ts
@@ -275,3 +275,10 @@ describe('hex ascii cell diff', () => {
     )
   })
 })
+
+describe('hex wrap-controls hide', () => {
+  it('hides Hex wrap-controls strip toward capture path-to-grid chrome', () => {
+    expect(hexView).toMatch(/\.hex-wrap-controls\s*\{[\s\S]*?display:\s*none/)
+    expect(css).toMatch(/\.hex-compare-view \.hex-wrap-controls\s*\{[\s\S]*?display:\s*none/)
+  })
+})
diff --git a/src/styles/main.css b/src/styles/main.css
index cc490c29..c091051a 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -2182,6 +2182,7 @@ html[data-show-path-bars='0'] .path-pair-bar {
 
 /* Hex wrap/controls + byte rows at capture CSS scale */
 .hex-compare-view .hex-wrap-controls {
+  display: none !important;
   gap: 4px 6px !important;
   min-height: 20px !important;
   padding: 2px 4px !important;
diff --git a/src/views/HexCompareView.vue b/src/views/HexCompareView.vue
index 089a89d9..8f336cdc 100644
--- a/src/views/HexCompareView.vue
+++ b/src/views/HexCompareView.vue
@@ -1512,7 +1512,7 @@ h2 {
 }
 
 .hex-wrap-controls {
-  display: grid;
+  display: none;
   grid-template-columns: minmax(0, 1fr) auto;
   align-items: end;
   gap: 4px 6px;

From 36518617ed711a35d5eb027aeca917508f0d5a71 Mon Sep 17 00:00:00 2001
From: Yukon <126093594+baseGame@users.noreply.github.com>
Date: Wed, 30 Sep 2026 12:28:59 +0800
Subject: [PATCH 2/2] Relocate Hex Run Diff out of the hidden wrap strip

Keep the capture path-to-grid chrome without the wrap strip, and move
Run Diff into path chrome so linkage e2e can still click it.
---
 src/views/HexCompareView.vue | 29 +++++++++++++++++++++--------
 1 file changed, 21 insertions(+), 8 deletions(-)

diff --git a/src/views/HexCompareView.vue b/src/views/HexCompareView.vue
index 8f336cdc..e2b6bcae 100644
--- a/src/views/HexCompareView.vue
+++ b/src/views/HexCompareView.vue
@@ -944,6 +944,15 @@ async function runHexSave(): Promise<void> {
             test-id="hex-right-path-footer"
           />
         </div>
+        <button
+          type="button"
+          class="hex-run-diff"
+          data-testid="run-hex-compare"
+          :disabled="loading"
+          @click="runHexCompare()"
+        >
+          {{ $t('ui.runDiff') }}
+        </button>
       </section>
       <section
         class="hex-wrap-controls"
@@ -974,14 +983,6 @@ async function runHexSave(): Promise<void> {
         <strong data-testid="hex-diff-ranges">{{
           $t('status.ranges', { count: diffRangeCount })
         }}</strong>
-        <button
-          type="button"
-          data-testid="run-hex-compare"
-          :disabled="loading"
-          @click="runHexCompare()"
-        >
-          {{ $t('ui.runDiff') }}
-        </button>
         <div
           class="hex-offset-chrome"
           data-testid="hex-offset-chrome"
@@ -1511,6 +1512,18 @@ h2 {
   line-height: 16px;
 }
 
+.hex-run-diff {
+  height: 18px;
+  min-height: 18px;
+  margin: 2px 0 0;
+  padding: 0 8px;
+  border: 1px solid #a0a0a0;
+  border-radius: 0;
+  background: #f0f0f0;
+  font-size: 11px;
+  line-height: 16px;
+}
+
 .hex-wrap-controls {
   display: none;
   grid-template-columns: minmax(0, 1fr) auto;