ceos/unsloth
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Settings: match dialog fills to the app shell surfaces (#7457)

Browse source 
* Settings: match dialog fills to the app shell surfaces

Tabs use the sidebar fill and the content pane uses the page fill, so
both track the active palette in light and dark.

* Pair the tab column fill with the sidebar foreground

Custom themes set --foreground but not --sidebar, so search result rows
could land white on white. Track the sidebar token instead.
This commit is contained in:
Michael Han 2026-07-26 00:01:22 -07:00 • committed by GitHub
commit 671d6dbf69
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 5 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

8
studio/frontend/src/features/settings/settings-dialog.tsx
View file

@ -267,7 +267,9 @@ export function SettingsDialog() {
</DialogDescription>
{/* Keep tab content from expanding the dialog grid. */}
<div className="flex h-full min-h-0 min-w-0 w-full max-sm:flex-col">
<aside className="font-heading flex w-[248px] shrink-0 flex-col border-r border-sidebar-border bg-muted/20 p-2 dark:border-r-0 max-sm:w-full max-sm:border-r-0 max-sm:border-b max-sm:border-sidebar-border">
{/* Match the app shell: tabs on the sidebar fill, content on the
page fill, so both track the active palette. */}
<aside className="font-heading flex w-[248px] shrink-0 flex-col border-r border-sidebar-border bg-sidebar text-sidebar-foreground p-2 dark:border-r-0 max-sm:w-full max-sm:border-r-0 max-sm:border-b max-sm:border-sidebar-border">
<div className="relative mx-1 mt-3 mb-2 max-sm:hidden">
<HugeiconsIcon
icon={Search01Icon}
@ -328,7 +330,7 @@ export function SettingsDialog() {
key={entry}
type="button"
onClick={() => openResult(tab.id, entry)}
className="flex h-[30px] items-center rounded-full pl-10 pr-2.5 text-left text-ui-14 text-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
className="flex h-[30px] items-center rounded-full pl-10 pr-2.5 text-left text-ui-14 text-sidebar-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
>
<span className="min-w-0 truncate">{entry}</span>
</button>
@ -412,7 +414,7 @@ export function SettingsDialog() {
</nav>
</aside>
<main className="relative flex min-h-0 min-w-0 flex-1 flex-col">
<main className="relative flex min-h-0 min-w-0 flex-1 flex-col bg-background">
<button
type="button"
onClick={closeDialog}