From 08b416b477a1151b6322243b2952067ec38d13ef Mon Sep 17 00:00:00 2001 From: Val Alexander Date: Tue, 10 Mar 2026 23:32:27 -0500 Subject: [PATCH] refactor(ui): update CSS styles for improved layout and consistency - Simplified font-body declaration in base.css for cleaner code. - Adjusted transition properties in components.css for better readability. - Added new .workspace-link class in components.css for enhanced link styling. - Changed config layout from grid to flex in config.css for better responsiveness. - Updated related tests to reflect layout changes in config-layout.browser.test.ts. --- ui/src/styles/base.css | 3 +- ui/src/styles/components.css | 27 ++++++++++- ui/src/styles/config.css | 59 +++++++++++++++++-------- ui/src/ui/config-layout.browser.test.ts | 2 +- 4 files changed, 67 insertions(+), 24 deletions(-) diff --git a/ui/src/styles/base.css b/ui/src/styles/base.css index c23e942d211..cb68a6b993c 100644 --- a/ui/src/styles/base.css +++ b/ui/src/styles/base.css @@ -81,8 +81,7 @@ /* Typography */ --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace; - --font-body: - "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; + --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-display: var(--font-body); /* Shadows - Subtle, layered depth */ diff --git a/ui/src/styles/components.css b/ui/src/styles/components.css index 649f5c14964..baa63bf4e3f 100644 --- a/ui/src/styles/components.css +++ b/ui/src/styles/components.css @@ -1839,7 +1839,8 @@ background: var(--card); color: var(--text); cursor: pointer; - transition: background var(--duration-fast) ease, + transition: + background var(--duration-fast) ease, border-color var(--duration-fast) ease; } @@ -1869,7 +1870,8 @@ background: transparent; color: var(--muted); cursor: pointer; - transition: background var(--duration-fast) ease, + transition: + background var(--duration-fast) ease, color var(--duration-fast) ease, border-color var(--duration-fast) ease; } @@ -3040,6 +3042,27 @@ gap: 10px; } +.workspace-link { + display: inline-flex; + align-items: center; + gap: 4px; + border: none; + background: transparent; + color: var(--accent); + font-family: var(--mono); + font-size: 12px; + padding: 2px 0; + cursor: pointer; + word-break: break-all; + text-align: left; + transition: opacity var(--duration-fast) ease; +} + +.workspace-link:hover { + opacity: 0.75; + text-decoration: underline; +} + .agent-model-actions { display: flex; align-items: center; diff --git a/ui/src/styles/config.css b/ui/src/styles/config.css index b5edbe1e2b1..d1e3379f65e 100644 --- a/ui/src/styles/config.css +++ b/ui/src/styles/config.css @@ -473,8 +473,7 @@ } .config-top-tabs { - display: grid; - grid-template-columns: minmax(220px, 320px) minmax(0, 1fr) auto; + display: flex; align-items: center; gap: 10px; padding: 10px 20px; @@ -490,7 +489,9 @@ .config-search--top { padding: 0; border-bottom: none; - min-width: 0; + min-width: 200px; + max-width: 320px; + flex: 0 1 320px; } .config-top-tabs__scroller { @@ -498,9 +499,8 @@ align-items: center; gap: 6px; min-width: 0; - overflow-x: auto; - padding-bottom: 2px; - scrollbar-width: thin; + flex: 1 1 auto; + flex-wrap: wrap; } .config-top-tabs__tab { @@ -540,6 +540,7 @@ .config-top-tabs__right { display: flex; justify-content: flex-end; + flex-shrink: 0; min-width: 0; } @@ -910,12 +911,24 @@ } /* Staggered entrance for sequential cards */ -.config-form--modern .config-section-card:nth-child(1) { animation-delay: 0ms; } -.config-form--modern .config-section-card:nth-child(2) { animation-delay: 40ms; } -.config-form--modern .config-section-card:nth-child(3) { animation-delay: 80ms; } -.config-form--modern .config-section-card:nth-child(4) { animation-delay: 120ms; } -.config-form--modern .config-section-card:nth-child(5) { animation-delay: 160ms; } -.config-form--modern .config-section-card:nth-child(n+6) { animation-delay: 200ms; } +.config-form--modern .config-section-card:nth-child(1) { + animation-delay: 0ms; +} +.config-form--modern .config-section-card:nth-child(2) { + animation-delay: 40ms; +} +.config-form--modern .config-section-card:nth-child(3) { + animation-delay: 80ms; +} +.config-form--modern .config-section-card:nth-child(4) { + animation-delay: 120ms; +} +.config-form--modern .config-section-card:nth-child(5) { + animation-delay: 160ms; +} +.config-form--modern .config-section-card:nth-child(n + 6) { + animation-delay: 200ms; +} /* =========================================== Form Fields @@ -1335,17 +1348,17 @@ background var(--duration-normal) ease; } -.cfg-toggle input:checked+.cfg-toggle__track { +.cfg-toggle input:checked + .cfg-toggle__track { background: var(--ok-subtle); border-color: rgba(34, 197, 94, 0.4); } -.cfg-toggle input:checked+.cfg-toggle__track::after { +.cfg-toggle input:checked + .cfg-toggle__track::after { transform: translateX(18px); background: var(--ok); } -.cfg-toggle input:focus+.cfg-toggle__track { +.cfg-toggle input:focus + .cfg-toggle__track { box-shadow: var(--focus-ring); } @@ -1682,7 +1695,7 @@ min-width: 0; } -.cfg-map__item-value>.cfg-fields { +.cfg-map__item-value > .cfg-fields { gap: 10px; } @@ -1777,13 +1790,21 @@ } .config-top-tabs { - grid-template-columns: 1fr; - align-items: stretch; + flex-wrap: wrap; padding: 12px 16px; } + .config-search--top { + flex: 1 1 100%; + max-width: none; + } + + .config-top-tabs__scroller { + flex: 1 1 100%; + } + .config-top-tabs__right { - justify-content: stretch; + flex: 1 1 100%; } .config-top-tabs__right .config-mode-toggle { diff --git a/ui/src/ui/config-layout.browser.test.ts b/ui/src/ui/config-layout.browser.test.ts index 48f9123d075..34cfeaa3de1 100644 --- a/ui/src/ui/config-layout.browser.test.ts +++ b/ui/src/ui/config-layout.browser.test.ts @@ -92,7 +92,7 @@ describe("config layout width", () => { expect(topTabs).not.toBeNull(); expect(scroller).not.toBeNull(); - expect(getComputedStyle(topTabs!).display).toBe("grid"); + expect(getComputedStyle(topTabs!).display).toBe("flex"); expect(getComputedStyle(scroller!).display).toBe("flex"); }); });