diff --git a/src/styles/clipboardChromeDensity.test.ts b/src/styles/clipboardChromeDensity.test.ts index 1c20fd2d..6fe4282a 100644 --- a/src/styles/clipboardChromeDensity.test.ts +++ b/src/styles/clipboardChromeDensity.test.ts @@ -9,31 +9,50 @@ const clipboardView = readFileSync(resolve(root, 'src/views/ClipboardCompareView const layout = readFileSync(resolve(root, 'src/layouts/AppLayout.vue'), 'utf8') describe('clipboard compare chrome density', () => { - it('keeps Clipboard Compare toolbar/history/status chrome dense toward capture', () => { + it('keeps Clipboard Compare toolbar/history/status chrome at capture CSS scale', () => { expect(css).toMatch(/\.clipboard-compare-view\s*\{[\s\S]*?padding:\s*2px 4px/) expect(css).toMatch( - /\.clipboard-compare-view \.clipboard-toolbar\s*\{[\s\S]*?min-height:\s*20px/, + /\.clipboard-compare-view \.clipboard-toolbar\s*\{[\s\S]*?min-height:\s*22px/, + ) + expect(css).toMatch( + /\.clipboard-compare-view \.clipboard-toolbar\s*\{[\s\S]*?border:\s*1px solid #a0a0a0/, + ) + expect(css).toMatch( + /\.clipboard-compare-view \.clipboard-toolbar \.n-button[\s\S]*?height:\s*18px/, + ) + expect(css).toMatch(/\.clipboard-compare-view \.history-entry\s*\{[\s\S]*?padding:\s*2px 6px/) + expect(css).toMatch( + /\.clipboard-compare-view \.path-side-footer\s*\{[\s\S]*?line-height:\s*16px/, ) - expect(css).toMatch(/\.clipboard-compare-view \.history-entry\s*\{[\s\S]*?padding:\s*1px 4px/) + expect(clipboardView).toMatch(/data-clipboard-chrome-density="capture-1to1"/) expect(clipboardView).toMatch(/\.clipboard-compare-view\s*\{[\s\S]*?padding:\s*2px 4px/) expect(clipboardView).toMatch(/chromeKind:\s*'clipboard-session'/) expect(clipboardView).toMatch(/PathMetaFooter/) expect(clipboardView).toMatch(/clipboard-path-footers/) + expect(clipboardView).toMatch(/:deep\(\.clipboard-toolbar \.n-button\)[\s\S]*?height:\s*18px/) + expect(clipboardView).not.toMatch(/font-size:\s*9px/) + expect(clipboardView).not.toMatch(/min-height:\s*9px/) expect(layout).toMatch(/data-chrome-kind='clipboard-session'[\s\S]*?height:\s*20px/) + expect(css).toMatch(/\.bc-session-toolbar\s*\{[\s\S]*?min-height:\s*38px/) }) - it('keeps Clipboard history pane/entry chrome dense one more notch toward capture', () => { - expect(css).toMatch(/\.clipboard-compare-view \.history-pane\s*\{[\s\S]*?padding:\s*1px 4px/) + it('keeps Clipboard history pane/entry chrome on capture band', () => { + expect(css).toMatch(/\.clipboard-compare-view \.history-pane\s*\{[\s\S]*?padding:\s*4px 6px/) + expect(css).toMatch( + /\.clipboard-compare-view \.history-pane header\s*\{[\s\S]*?min-height:\s*20px/, + ) + expect(css).toMatch(/\.clipboard-compare-view \.history-entry\s*\{[\s\S]*?min-height:\s*18px/) expect(css).toMatch( - /\.clipboard-compare-view \.history-pane header\s*\{[\s\S]*?min-height:\s*16px/, + /\.clipboard-compare-view \.history-entry\s*\{[\s\S]*?border:\s*1px solid #a0a0a0/, ) - expect(css).toMatch(/\.clipboard-compare-view \.history-entry\s*\{[\s\S]*?min-height:\s*20px/) - expect(clipboardView).toMatch(/\.history-pane\s*\{[\s\S]*?padding:\s*1px 4px/) - expect(clipboardView).toMatch(/\.history-pane header\s*\{[\s\S]*?min-height:\s*16px/) - expect(clipboardView).toMatch(/\.history-entry\s*\{[\s\S]*?min-height:\s*20px/) - expect(clipboardView).toMatch(/\.history-entry\s*\{[\s\S]*?padding:\s*1px 4px/) + expect(clipboardView).toMatch(/data-clipboard-rows-density="capture-1to1"/) + expect(clipboardView).toMatch(/\.history-pane\s*\{[\s\S]*?padding:\s*4px 6px/) + expect(clipboardView).toMatch(/\.history-pane header\s*\{[\s\S]*?min-height:\s*20px/) + expect(clipboardView).toMatch(/\.history-entry\s*\{[\s\S]*?min-height:\s*18px/) + expect(clipboardView).toMatch(/\.history-entry\s*\{[\s\S]*?padding:\s*2px 6px/) + expect(clipboardView).toMatch(/\.history-pane header span\s*\{[\s\S]*?line-height:\s*16px/) }) }) diff --git a/src/styles/main.css b/src/styles/main.css index ebaabc6c..6d8007d2 100644 --- a/src/styles/main.css +++ b/src/styles/main.css @@ -2713,22 +2713,49 @@ html[data-show-path-bars='0'] .path-pair-bar { line-height: 16px !important; } -/* Clipboard Compare chrome densify toward capture toolbar/history/status strips */ +/* Clipboard Compare chrome at capture CSS scale (toolbar/history ~18–20px; do not crush) */ .clipboard-compare-view { - gap: 2px !important; + gap: 4px !important; padding: 2px 4px !important; } .clipboard-compare-view .clipboard-toolbar { - gap: 2px 4px !important; - min-height: 20px !important; - padding: 1px 4px !important; + gap: 4px 6px !important; + min-height: 22px !important; + padding: 2px 4px !important; + border: 1px solid #a0a0a0 !important; + border-radius: 0 !important; + background: var(--app-surface) !important; +} + +.clipboard-compare-view .clipboard-toolbar .n-button { + --n-height: 18px !important; + --n-padding: 0 6px !important; + --n-font-size: 11px !important; + + height: 18px !important; + min-height: 18px !important; + padding: 0 6px !important; border-radius: 0 !important; + font-size: 11px !important; + line-height: 16px !important; } .clipboard-compare-view .status-chip { font-size: 11px !important; - line-height: 14px !important; + line-height: 16px !important; +} + +.clipboard-compare-view .bc-path-footers { + gap: 1px !important; + min-height: 20px !important; + padding: 0 2px !important; +} + +.clipboard-compare-view .path-side-footer { + min-height: 20px !important; + font-size: 11px !important; + line-height: 16px !important; } .clipboard-compare-view .clipboard-layout { @@ -2737,17 +2764,23 @@ html[data-show-path-bars='0'] .path-pair-bar { .clipboard-compare-view .history-pane, .clipboard-compare-view .diff-pane { + border: 1px solid #a0a0a0 !important; border-radius: 0 !important; } .clipboard-compare-view .history-pane { - gap: 2px !important; - padding: 1px 4px !important; + gap: 4px !important; + padding: 4px 6px !important; } .clipboard-compare-view .history-pane header { - gap: 4px !important; - min-height: 16px !important; + gap: 6px !important; + min-height: 20px !important; +} + +.clipboard-compare-view .history-pane header span { + font-size: 11px !important; + line-height: 16px !important; } .clipboard-compare-view .history-list { @@ -2755,10 +2788,19 @@ html[data-show-path-bars='0'] .path-pair-bar { } .clipboard-compare-view .history-entry { - gap: 0 4px !important; - min-height: 20px !important; - padding: 1px 4px !important; + gap: 0 6px !important; + min-height: 18px !important; + padding: 2px 6px !important; + border: 1px solid #a0a0a0 !important; border-radius: 0 !important; + font-size: 11px !important; + line-height: 16px !important; +} + +.clipboard-compare-view .history-entry small, +.clipboard-compare-view .history-entry code { + font-size: 11px !important; + line-height: 16px !important; } /* Table Compare path chrome densify toward capture (~20px path/status) */ diff --git a/src/views/ClipboardCompareView.vue b/src/views/ClipboardCompareView.vue index 10c8f833..038259cd 100644 --- a/src/views/ClipboardCompareView.vue +++ b/src/views/ClipboardCompareView.vue @@ -266,7 +266,10 @@ watch( toolbar-test-id-prefix="clipboard-toolbar" @toolbar-command="runClipboardToolbarCommand" > -
+
-