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

Fix Settings layout overflow (#7167)

Browse source 
* Fix settings dialog overflow

* Fix compact settings overflow

* Add settings overflow regression contracts

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

---------

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
This commit is contained in:
Michael Han 2026-07-16 03:12:09 -07:00 • committed by GitHub
commit 1b3d728d78
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 42 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

2
studio/frontend/src/features/settings/components/api-monitor-console.tsx
View file

@ -111,7 +111,7 @@ function MonitorEntry({
const reply = replyText || (entry.status === "running" ? "Waiting..." : "No reply");
return (
<article className="rounded-lg border border-border/70 bg-background">
<article className="min-w-0 rounded-lg border border-border/70 bg-background">
<button
type="button"
onClick={onToggle}

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

@ -253,7 +253,8 @@ export function SettingsDialog() {
<DialogDescription className="sr-only">
{t("settings.dialog.description")}
</DialogDescription>
<div className="flex h-full min-h-0 max-sm:flex-col">
{/* 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">
<div className="relative mx-1 mt-3 mb-2 max-sm:hidden">
<HugeiconsIcon

7
studio/frontend/src/features/settings/tabs/general-tab.tsx
View file

@ -654,9 +654,10 @@ export function GeneralTab() {
description={t("settings.general.rag.embeddingModelDescription", {
defaultModel: embeddingModel?.defaultEmbeddingModel ?? "",
})}
className="max-[360px]:flex-col max-[360px]:items-stretch max-[360px]:gap-3"
>
<div className="flex flex-col items-end gap-1">
<div className="flex items-center gap-2">
<div className="flex flex-col items-end gap-1 max-[360px]:w-full">
<div className="flex items-center gap-2 max-[360px]:w-full">
<EmbeddingModelCombobox
value={draftEmbeddingModel}
onChange={(next) => {
@ -668,7 +669,7 @@ export function GeneralTab() {
disabled={!embeddingModel}
placeholder={embeddingModel?.defaultEmbeddingModel ?? ""}
ariaLabel={t("settings.general.rag.embeddingModel")}
className="w-[220px]"
className="w-[220px] max-[360px]:min-w-0 max-[360px]:flex-1"
/>
<Button
variant="outline"

35
tests/studio/test_settings_compact_overflow_contract.py Normal file
View file

@ -0,0 +1,35 @@
"""Responsive overflow contracts for the settings dialog."""
from pathlib import Path
REPO = Path(__file__).resolve().parents[2]
SETTINGS_DIALOG = REPO / "studio/frontend/src/features/settings/settings-dialog.tsx"
API_MONITOR = REPO / "studio/frontend/src/features/settings/components/api-monitor-console.tsx"
GENERAL_TAB = REPO / "studio/frontend/src/features/settings/tabs/general-tab.tsx"
def test_dialog_content_can_shrink_inside_the_dialog_grid():
source = SETTINGS_DIALOG.read_text(encoding = "utf-8")
assert "flex h-full min-h-0 min-w-0 w-full max-sm:flex-col" in source
assert "relative flex min-h-0 min-w-0 flex-1 flex-col" in source
def test_api_monitor_entries_and_expanded_text_can_shrink():
source = API_MONITOR.read_text(encoding = "utf-8")
assert (
'<article className="min-w-0 rounded-lg border border-border/70 bg-background">' in source
)
assert (
'<section className="flex min-w-0 flex-col rounded-lg border border-border/70 bg-background">'
in source
)
assert source.count('className="max-h-44 overflow-auto whitespace-pre-wrap break-words') == 2
def test_embedding_model_controls_stack_on_the_narrowest_viewports():
source = GENERAL_TAB.read_text(encoding = "utf-8")
assert (
'className="max-[360px]:flex-col max-[360px]:items-stretch max-[360px]:gap-3"'
) in source
assert 'className="w-[220px] max-[360px]:min-w-0 max-[360px]:flex-1"' in source