From 1b3d728d7828dce3a91e69d6e9f48b521d066205 Mon Sep 17 00:00:00 2001
From: Michael Han <107991372+shimmyshimmer@users.noreply.github.com>
Date: Thu, 16 Jul 2026 03:12:09 -0700
Subject: [PATCH] Fix Settings layout overflow (#7167)

* 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>
---
 .../components/api-monitor-console.tsx        |  2 +-
 .../src/features/settings/settings-dialog.tsx |  3 +-
 .../features/settings/tabs/general-tab.tsx    |  7 ++--
 ...test_settings_compact_overflow_contract.py | 35 +++++++++++++++++++
 4 files changed, 42 insertions(+), 5 deletions(-)
 create mode 100644 tests/studio/test_settings_compact_overflow_contract.py

diff --git a/studio/frontend/src/features/settings/components/api-monitor-console.tsx b/studio/frontend/src/features/settings/components/api-monitor-console.tsx
index ab67d4e006..ef4daa1349 100644
--- a/studio/frontend/src/features/settings/components/api-monitor-console.tsx
+++ b/studio/frontend/src/features/settings/components/api-monitor-console.tsx
@@ -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}
diff --git a/studio/frontend/src/features/settings/settings-dialog.tsx b/studio/frontend/src/features/settings/settings-dialog.tsx
index 7625449648..08588be8fe 100644
--- a/studio/frontend/src/features/settings/settings-dialog.tsx
+++ b/studio/frontend/src/features/settings/settings-dialog.tsx
@@ -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
diff --git a/studio/frontend/src/features/settings/tabs/general-tab.tsx b/studio/frontend/src/features/settings/tabs/general-tab.tsx
index 1460c7dea2..73a33fd155 100644
--- a/studio/frontend/src/features/settings/tabs/general-tab.tsx
+++ b/studio/frontend/src/features/settings/tabs/general-tab.tsx
@@ -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"
diff --git a/tests/studio/test_settings_compact_overflow_contract.py b/tests/studio/test_settings_compact_overflow_contract.py
new file mode 100644
index 0000000000..b8547975d2
--- /dev/null
+++ b/tests/studio/test_settings_compact_overflow_contract.py
@@ -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