ompchamber 3.1.1 → 3.3.0

package/src/client/components/settings/categories/McpSettings.tsx

@@ -8,6 +8,8 @@ import { McpImportModal } from '@/client/components/settings/categories/mcp-sett
 import { LoadingState } from '@/client/components/settings/LoadingState';
 import { useSidebarData } from '@/client/hooks/chat/omp/session-list';
 import { useCrudList } from '@/client/hooks/settings/crud-list';
+import { useSettingsMasterDetail } from '@/client/hooks/settings/master-detail';
+import { SettingsMasterDetail } from '@/client/components/settings/master-detail';
 
 interface McpSettingsProps {
   settings: SettingsState;
@@ -17,6 +19,7 @@ interface McpSettingsProps {
 const GLOBAL_PROJECT: McpProjectOption = { id: 'global', name: 'Global (all projects)', path: '' };
 
 export const McpSettings: FunctionComponent<McpSettingsProps> = () => {
+  const masterDetail = useSettingsMasterDetail();
   const { folders } = useSidebarData();
   const projects = useMemo<McpProjectOption[]>(() => {
     const bound = folders.flatMap<McpProjectOption>((folder) =>
@@ -98,39 +101,53 @@ export const McpSettings: FunctionComponent<McpSettingsProps> = () => {
 
   return (
     <div className="flex h-full w-full overflow-hidden bg-paper">
-      <McpSidebarList
-        servers={servers}
-        projects={projects}
-        selectedServerId={isCreatingNew ? null : selectedId}
-        onSelectServer={select}
-        onAddNewServer={startCreate}
-        selectedProject={selectedProject}
-        onChangeProject={setSelectedProject}
-      />
-
-      <div className="flex-1 h-full overflow-hidden flex flex-col">
-        {isCreatingNew ? (
-          <McpDetailPane
-            server={emptyServerTemplate}
-            isNew={true}
-            onSave={save}
-            onOpenImportModal={() => setIsImportModalOpen(true)}
-          />
-        ) : selectedServer ? (
-          <McpDetailPane
-            key={selectedServer.id}
-            server={selectedServer}
-            isNew={false}
-            onSave={save}
-            onDelete={remove}
-            onOpenImportModal={() => setIsImportModalOpen(true)}
+      <SettingsMasterDetail
+        pane={masterDetail.pane}
+        onBack={masterDetail.back}
+        listLabel="MCP Servers"
+        list={
+          <McpSidebarList
+            servers={servers}
+            projects={projects}
+            selectedServerId={isCreatingNew ? null : selectedId}
+            onSelectServer={(id) => {
+              select(id);
+              masterDetail.openDetail();
+            }}
+            onAddNewServer={() => {
+              startCreate();
+              masterDetail.openDetail();
+            }}
+            selectedProject={selectedProject}
+            onChangeProject={setSelectedProject}
           />
-        ) : (
-          <div className="flex-1 flex items-center justify-center text-xs font-mono text-ink/40">
-            Select an MCP server or click + to configure one
+        }
+        detail={
+          <div className="flex-1 h-full overflow-hidden flex flex-col">
+            {isCreatingNew ? (
+              <McpDetailPane
+                server={emptyServerTemplate}
+                isNew={true}
+                onSave={save}
+                onOpenImportModal={() => setIsImportModalOpen(true)}
+              />
+            ) : selectedServer ? (
+              <McpDetailPane
+                key={selectedServer.id}
+                server={selectedServer}
+                isNew={false}
+                onSave={save}
+                onDelete={remove}
+                onOpenImportModal={() => setIsImportModalOpen(true)}
+              />
+            ) : (
+              <div className="flex-1 flex items-center justify-center text-xs font-mono text-ink/40">
+                Select an MCP server or click + to configure one
+              </div>
+            )}
           </div>
-        )}
-      </div>
+        }
+      />
 
       <McpImportModal
         isOpen={isImportModalOpen}

package/src/client/components/settings/categories/ProjectSettings.tsx

@@ -4,8 +4,11 @@ import { ProjectSidebarList } from '@/client/components/settings/categories/proj
 import { ProjectDetailsForm } from '@/client/components/settings/categories/project-settings/DetailsForm';
 import { LoadingState } from '@/client/components/settings/LoadingState';
 import { useChamberEvent } from '@/client/hooks/ui/window-event';
+import { useSettingsMasterDetail } from '@/client/hooks/settings/master-detail';
+import { SettingsMasterDetail } from '@/client/components/settings/master-detail';
 
 export function ProjectSettings() {
+  const masterDetail = useSettingsMasterDetail();
   const [projects, setProjects] = useState<ProjectConfigItem[]>([]);
   const [availableModels, setAvailableModels] = useState<string[]>([]);
   const [accentColorOptions, setAccentColorOptions] = useState<AccentColorOption[]>([]);
@@ -94,6 +97,9 @@ export function ProjectSettings() {
       };
       setProjects((current) => [...current, newProject]);
       setSelectedProjectId(newProject.id);
+      // On a phone the new project's details are the point of adding it; the
+      // list pane would hide the row that was just created.
+      masterDetail.openDetail();
       window.dispatchEvent(new CustomEvent('omp:workspace-updated', { detail: { folderId } }));
     } catch (error) {
       console.error('Failed to add project:', error);
@@ -151,26 +157,35 @@ export function ProjectSettings() {
   }
 
   return (
-    <div className="w-full h-full flex flex-col md:flex-row overflow-hidden bg-paper text-ink">
-      {/* Left Column: Project list with counter & Add button */}
-      <ProjectSidebarList
-        projects={projects}
-        selectedProjectId={selectedProject?.id || ''}
-        onSelectProject={setSelectedProjectId}
-        onAddProject={handleAddProject}
+    <div className="w-full h-full flex flex-col overflow-hidden bg-paper text-ink">
+      <SettingsMasterDetail
+        pane={masterDetail.pane}
+        onBack={masterDetail.back}
+        listLabel="Projects"
+        list={
+          <ProjectSidebarList
+            projects={projects}
+            selectedProjectId={selectedProject?.id || ''}
+            onSelectProject={(id) => {
+              setSelectedProjectId(id);
+              masterDetail.openDetail();
+            }}
+            onAddProject={handleAddProject}
+          />
+        }
+        detail={
+          selectedProject ? (
+            <ProjectDetailsForm
+              project={selectedProject}
+              canDelete={projects.length > 1}
+              onUpdateField={handleUpdateField}
+              onDeleteProject={handleDeleteProject}
+              availableModels={availableModels}
+              accentColorOptions={accentColorOptions}
+            />
+          ) : null
+        }
       />
-
-      {/* Right Column: Project details & controls */}
-      {selectedProject && (
-        <ProjectDetailsForm
-          project={selectedProject}
-          canDelete={projects.length > 1}
-          onUpdateField={handleUpdateField}
-          onDeleteProject={handleDeleteProject}
-          availableModels={availableModels}
-          accentColorOptions={accentColorOptions}
-        />
-      )}
     </div>
   );
 }

package/src/client/components/settings/categories/ProviderSettings.tsx

@@ -13,6 +13,8 @@ import { AddModelModal } from '@/client/components/settings/categories/provider-
 import { DeleteProviderModal } from '@/client/components/settings/categories/provider-settings/DeleteProviderModal';
 import { providerEmptyReason } from '@/shared/lib/models/provider/dialect';
 import { configuredProviderSlugs } from '@/shared/lib/models/provider/presets';
+import { useSettingsMasterDetail } from '@/client/hooks/settings/master-detail';
+import { SettingsMasterDetail } from '@/client/components/settings/master-detail';
 
 interface ProviderSettingsProps {
   autoOpenAdd?: boolean;
@@ -23,6 +25,7 @@ export function ProviderSettings({
   autoOpenAdd = false,
   onAddModalClose,
 }: ProviderSettingsProps) {
+  const masterDetail = useSettingsMasterDetail();
   const {
     providers,
     connectedProviders,
@@ -66,61 +69,76 @@ export function ProviderSettings({
   } = useProviderSettings({ autoOpenAdd, onAddModalClose });
 
   return (
-    <div className="w-full h-full flex flex-col md:flex-row overflow-hidden bg-paper text-ink">
-      <ProviderSidebarList
-        providers={connectedProviders}
-        selectedProviderId={selectedProvider?.id || ''}
-        onSelectProvider={setSelectedProviderId}
-        onOpenAddModal={() => setIsAddModalOpen(true)}
-        currentProject={currentProject}
-        onSelectProject={setCurrentProject}
-      />
-
-      <div className="flex-1 scrollbar-overlay-container scrollbar-overlay-static p-6 md:p-8 space-y-6">
-        {selectedProvider ? (
-          <>
-            <ProviderHeader provider={selectedProvider} />
+    <div className="w-full h-full flex flex-col overflow-hidden bg-paper text-ink">
+      <SettingsMasterDetail
+        // The "add provider" dialog lives inside the detail pane, so a hidden
+        // pane would hide the dialog with it — and `autoOpenAdd` (the model
+        // dropdown's "no provider configured" path) opens it without any row
+        // having been tapped. While that dialog is open the pane stays up.
+        pane={isAddModalOpen ? 'detail' : masterDetail.pane}
+        onBack={masterDetail.back}
+        listLabel="Providers"
+        list={
+          <ProviderSidebarList
+            providers={connectedProviders}
+            selectedProviderId={selectedProvider?.id || ''}
+            onSelectProvider={(id) => {
+              setSelectedProviderId(id);
+              masterDetail.openDetail();
+            }}
+            onOpenAddModal={() => setIsAddModalOpen(true)}
+            currentProject={currentProject}
+            onSelectProject={setCurrentProject}
+          />
+        }
+        detail={
+          <div className="flex-1 scrollbar-overlay-container scrollbar-overlay-static p-6 md:p-8 space-y-6">
+            {selectedProvider ? (
+              <>
+                <ProviderHeader provider={selectedProvider} />
 
-            <ProviderAuthSection
-              provider={selectedProvider}
-              onOpenReconnectModal={() => {
-                // A provider omp signs in through `/login` needs the OAuth
-                // dialog; one whose endpoint and key live in models.yml (or the
-                // chamber overlay) is edited in place. Testing the provider ID
-                // for `omp-auth-` was wrong: a native models.yml entry shares
-                // that ID prefix once merged, and a keyless local server has no
-                // login flow to complete at all.
-                if (selectedProvider.credentialSource === 'omp-auth' && selectedProvider.auth !== 'none') {
-                  setIsLoginModalOpen(true);
-                } else {
-                  setIsReconnectModalOpen(true);
-                }
-              }}
-              onToggleDisconnect={handleToggleDisconnect}
-              onToggleDisabled={handleToggleProviderDisabled}
-              onDelete={() => setIsDeleteModalOpen(true)}
-            />
+                <ProviderAuthSection
+                  provider={selectedProvider}
+                  onOpenReconnectModal={() => {
+                    // A provider omp signs in through `/login` needs the OAuth
+                    // dialog; one whose endpoint and key live in models.yml (or the
+                    // chamber overlay) is edited in place. Testing the provider ID
+                    // for `omp-auth-` was wrong: a native models.yml entry shares
+                    // that ID prefix once merged, and a keyless local server has no
+                    // login flow to complete at all.
+                    if (selectedProvider.credentialSource === 'omp-auth' && selectedProvider.auth !== 'none') {
+                      setIsLoginModalOpen(true);
+                    } else {
+                      setIsReconnectModalOpen(true);
+                    }
+                  }}
+                  onToggleDisconnect={handleToggleDisconnect}
+                  onToggleDisabled={handleToggleProviderDisabled}
+                  onDelete={() => setIsDeleteModalOpen(true)}
+                />
 
-            <ProviderModelsList
-              models={selectedProvider.models}
-              emptyReason={providerEmptyReason(selectedProvider)}
-              onToggleModelVisibility={handleToggleModelVisibility}
-              onHideAll={handleHideAll}
-              onShowAll={handleShowAll}
-              onFetchModels={handleFetchModelsFromList}
-              onAddModel={() => setIsAddModelModalOpen(true)}
-              canFetchModels={Boolean(selectedProvider.baseUrl)}
-              isFetchingModels={isFetchingModels}
-              onOpenModelConfig={(model) => setConfigModel(model)}
-              onOpenModelCapabilities={(model) => setCapabilitiesModel(model)}
-            />
-          </>
-        ) : (
-          <div className="py-12 text-center text-xs text-ink/40">
-            Select a provider from the sidebar to view connection details
+                <ProviderModelsList
+                  models={selectedProvider.models}
+                  emptyReason={providerEmptyReason(selectedProvider)}
+                  onToggleModelVisibility={handleToggleModelVisibility}
+                  onHideAll={handleHideAll}
+                  onShowAll={handleShowAll}
+                  onFetchModels={handleFetchModelsFromList}
+                  onAddModel={() => setIsAddModelModalOpen(true)}
+                  canFetchModels={Boolean(selectedProvider.baseUrl)}
+                  isFetchingModels={isFetchingModels}
+                  onOpenModelConfig={(model) => setConfigModel(model)}
+                  onOpenModelCapabilities={(model) => setCapabilitiesModel(model)}
+                />
+              </>
+            ) : (
+              <div className="py-12 text-center text-xs text-ink/40">
+                Select a provider from the sidebar to view connection details
+              </div>
+            )}
           </div>
-        )}
-      </div>
+        }
+      />
 
       <ToastStack toasts={toasts} onDismiss={dismissToast} />
 
@@ -130,7 +148,13 @@ export function ProviderSettings({
           setIsAddModalOpen(false);
           onAddModalClose?.();
         }}
-        onAddProvider={handleAddProvider}
+        onAddProvider={async (provider, options) => {
+          await handleAddProvider(provider, options);
+          // The row now exists in the list; on a phone the newly registered
+          // provider is what the user came to configure, so land on its detail
+          // rather than dropping them back on the list.
+          masterDetail.openDetail();
+        }}
         presets={availablePresetProviders}
         existingSlugs={configuredProviderSlugs(providers)}
       />

package/src/client/components/settings/categories/SkillSettings.tsx

@@ -4,6 +4,8 @@ import { SkillSidebarList } from '@/client/components/settings/categories/skill-
 import { SkillDetailPane } from '@/client/components/settings/categories/skill-settings/DetailPane';
 import { LoadingState } from '@/client/components/settings/LoadingState';
 import { useCrudList } from '@/client/hooks/settings/crud-list';
+import { useSettingsMasterDetail } from '@/client/hooks/settings/master-detail';
+import { SettingsMasterDetail } from '@/client/components/settings/master-detail';
 
 interface SkillSettingsProps {
   settings?: SettingsState;
@@ -12,6 +14,7 @@ interface SkillSettingsProps {
 }
 
 export function SkillSettings({ onNavigateToCatalog }: SkillSettingsProps) {
+  const masterDetail = useSettingsMasterDetail();
   const [selectedProjectId, setSelectedProjectId] = useState('ompchamber');
   const { items: skills, selectedId, selected: selectedSkill, isCreatingNew, isLoading, select, startCreate, save, remove } =
     useCrudList<SkillItem, Partial<SkillItem>>({
@@ -46,23 +49,37 @@ export function SkillSettings({ onNavigateToCatalog }: SkillSettingsProps) {
   }
 
   return (
-    <div className="flex-1 flex flex-col md:flex-row h-full w-full overflow-hidden bg-paper">
-      <SkillSidebarList
-        skills={skills}
-        selectedSkillId={selectedId}
-        isCreatingNew={isCreatingNew}
-        onSelectSkill={select}
-        onAddNewSkill={startCreate}
-        selectedProject={selectedProjectId}
-        onSelectProject={setSelectedProjectId}
-      />
-
-      <SkillDetailPane
-        skill={selectedSkill ?? null}
-        isCreatingNew={isCreatingNew}
-        onSave={save}
-        onDelete={remove}
-        onOpenCatalog={onNavigateToCatalog}
+    <div className="flex-1 flex flex-col h-full w-full overflow-hidden bg-paper">
+      <SettingsMasterDetail
+        pane={masterDetail.pane}
+        onBack={masterDetail.back}
+        listLabel="Skills"
+        list={
+          <SkillSidebarList
+            skills={skills}
+            selectedSkillId={selectedId}
+            isCreatingNew={isCreatingNew}
+            onSelectSkill={(id) => {
+              select(id);
+              masterDetail.openDetail();
+            }}
+            onAddNewSkill={() => {
+              startCreate();
+              masterDetail.openDetail();
+            }}
+            selectedProject={selectedProjectId}
+            onSelectProject={setSelectedProjectId}
+          />
+        }
+        detail={
+          <SkillDetailPane
+            skill={selectedSkill ?? null}
+            isCreatingNew={isCreatingNew}
+            onSave={save}
+            onDelete={remove}
+            onOpenCatalog={onNavigateToCatalog}
+          />
+        }
       />
     </div>
   );

package/src/client/components/settings/categories/UsageSettings.tsx

@@ -5,9 +5,12 @@ import { buildProviders, type UsageProviderId } from '@/client/components/settin
 import { ProviderDetail } from '@/client/components/settings/categories/usage-settings/ProviderDetail';
 import { formatDateTime } from '@/client/components/settings/categories/usage-settings/format';
 import { useUsageReport } from '@/client/hooks/settings/useUsageReport';
+import { useSettingsMasterDetail } from '@/client/hooks/settings/master-detail';
+import { SettingsMasterDetail } from '@/client/components/settings/master-detail';
 
 /** Settings → Usage: provider quota, balances, and locally recorded burn. */
 export function UsageSettings() {
+  const masterDetail = useSettingsMasterDetail();
   const { report, isLoading, error, reload } = useUsageReport();
   const [selectedProviderId, setSelectedProviderId] = useState<UsageProviderId>('');
 
@@ -46,47 +49,58 @@ export function UsageSettings() {
 
   return (
     <div className="flex h-full w-full overflow-hidden bg-paper text-xs text-ink">
-      <UsageSidebarList
-        report={report}
-        selectedProviderId={selected?.id ?? ''}
-        onSelectProvider={setSelectedProviderId}
-      />
-
-      <div className="flex-1 h-full overflow-hidden flex flex-col">
-        <div className="px-3.5 py-2.5 border-b border-ink/10 flex items-center justify-between gap-3 flex-shrink-0">
-          <div className="flex items-center gap-2 min-w-0">
-            <span className="text-xs font-semibold text-ink/75 truncate">
-              Updated {formatDateTime(report.generatedAt)}
-            </span>
-            {report.isMock && (
-              <span className="text-[10px] font-mono uppercase tracking-wider bg-ink/5 border border-ink/15 rounded px-1.5 py-0.5 text-ink/60">
-                Mock
-              </span>
-            )}
-          </div>
-          <button
-            type="button"
-            onClick={() => reload({ force: true })}
-            disabled={isLoading}
-            className="p-1.5 bg-paper border border-ink/15 rounded-md hover:bg-ink/5 text-ink/80 transition-colors disabled:opacity-50 flex-shrink-0"
-            title="Refresh usage"
-          >
-            <RefreshCw size={12} className={isLoading ? 'animate-spin text-ink' : ''} />
-          </button>
-        </div>
+      <SettingsMasterDetail
+        pane={masterDetail.pane}
+        onBack={masterDetail.back}
+        listLabel="Usage"
+        list={
+          <UsageSidebarList
+            report={report}
+            selectedProviderId={selected?.id ?? ''}
+            onSelectProvider={(id) => {
+              setSelectedProviderId(id);
+              masterDetail.openDetail();
+            }}
+          />
+        }
+        detail={
+          <div className="flex-1 h-full overflow-hidden flex flex-col">
+            <div className="px-3.5 py-2.5 border-b border-ink/10 flex items-center justify-between gap-3 flex-shrink-0">
+              <div className="flex items-center gap-2 min-w-0">
+                <span className="text-xs font-semibold text-ink/75 truncate">
+                  Updated {formatDateTime(report.generatedAt)}
+                </span>
+                {report.isMock && (
+                  <span className="text-[10px] font-mono uppercase tracking-wider bg-ink/5 border border-ink/15 rounded px-1.5 py-0.5 text-ink/60">
+                    Mock
+                  </span>
+                )}
+              </div>
+              <button
+                type="button"
+                onClick={() => reload({ force: true })}
+                disabled={isLoading}
+                className="p-1.5 bg-paper border border-ink/15 rounded-md hover:bg-ink/5 text-ink/80 transition-colors disabled:opacity-50 flex-shrink-0"
+                title="Refresh usage"
+              >
+                <RefreshCw size={12} className={isLoading ? 'animate-spin text-ink' : ''} />
+              </button>
+            </div>
 
-        <div className="flex-1 overflow-y-auto scrollbar-overlay-container scrollbar-overlay-static p-3.5 space-y-4">
-          {error && <p className="text-error text-xs">{error}</p>}
+            <div className="flex-1 overflow-y-auto scrollbar-overlay-container scrollbar-overlay-static p-3.5 space-y-4">
+              {error && <p className="text-error text-xs">{error}</p>}
 
-          {selected ? (
-            <ProviderDetail summary={selected.summary} />
-          ) : (
-            <p className="text-[11px] text-ink/50 leading-relaxed">
-              No provider credentials detected. Add an API key in Settings → Providers and it will appear here.
-            </p>
-          )}
-        </div>
-      </div>
+              {selected ? (
+                <ProviderDetail summary={selected.summary} />
+              ) : (
+                <p className="text-[11px] text-ink/50 leading-relaxed">
+                  No provider credentials detected. Add an API key in Settings → Providers and it will appear here.
+                </p>
+              )}
+            </div>
+          </div>
+        }
+      />
     </div>
   );
 }

package/src/client/components/settings/categories/appearance-settings/EditorFontSection.tsx

@@ -0,0 +1,78 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { Check, Type } from 'lucide-preact';
+import type { SettingsState } from '@/shared/types';
+import { EDITOR_FONT_CHOICES } from '@/shared/lib/code/editor/typography';
+
+interface EditorFontSectionProps {
+  settings: SettingsState;
+  onUpdate: (updater: Partial<SettingsState> | ((prev: SettingsState) => SettingsState)) => void;
+}
+
+/**
+ * The code editor's typeface.
+ *
+ * Only Fira Code is bundled, so each row states whether the face ships with the
+ * app or has to come from the device. That is the difference between a choice
+ * that always works and one that silently falls back — and the fallback is
+ * visible in the row's own preview, which is set in the face it names.
+ */
+export function EditorFontSection({ settings, onUpdate }: EditorFontSectionProps) {
+  const active = settings.editorFont || EDITOR_FONT_CHOICES[0].id;
+
+  return (
+    <section className="space-y-3">
+      <div>
+        <h3 className="font-semibold text-sm uppercase tracking-wider text-ink/80 flex items-center gap-2">
+          <Type size={16} className="text-ink/60" />
+          Editor Font
+        </h3>
+        <p className="text-[11px] text-ink/60 mt-1">
+          Typeface for the code editor and its line numbers, in both the desktop panel and the phone's
+          full-screen editor. Only Fira Code ships with the app; the others are used when your device
+          has them, and fall back to Fira Code when it does not.
+        </p>
+      </div>
+
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
+        {EDITOR_FONT_CHOICES.map((choice) => {
+          const selected = active === choice.id;
+          return (
+            <button
+              key={choice.id}
+              type="button"
+              onClick={() => onUpdate({ editorFont: choice.id })}
+              aria-pressed={selected}
+              className={`flex items-center justify-between gap-3 rounded-lg border px-3 py-2 text-left transition-colors ${
+                selected ? 'border-ink/40 bg-ink/5' : 'border-ink/12 hover:bg-ink/5'
+              }`}
+            >
+              <span className="min-w-0">
+                {/* Preview in the face it names: an uninstalled choice shows its
+                    own fallback here rather than after the user commits to it. */}
+                <span
+                  className="block truncate text-xs text-ink"
+                  style={{ fontFamily: `"${choice.id}", monospace` }}
+                >
+                  const greet = () =&gt; 'hi'
+                </span>
+                <span className="mt-0.5 flex items-center gap-1.5 text-[10px] text-ink/50">
+                  <span>{choice.label}</span>
+                  {choice.bundled && (
+                    <span className="rounded bg-ink/8 px-1 py-px text-[9px] uppercase tracking-wide">
+                      Bundled
+                    </span>
+                  )}
+                </span>
+              </span>
+              {selected && <Check size={14} className="text-ink flex-shrink-0" />}
+            </button>
+          );
+        })}
+      </div>
+    </section>
+  );
+}

package/src/client/components/settings/categories/behavior-settings/Editor.tsx

@@ -105,24 +105,24 @@ export const BehaviorEditor: FunctionComponent<BehaviorEditorProps> = ({
   return (
     <div className="flex-1 flex flex-col h-full bg-paper text-ink p-6 md:p-8 overflow-hidden">
       {/* Header Bar */}
-      <div className="flex items-center justify-between pb-4 border-b border-ink/10">
-        <div className="flex items-center gap-2">
+      <div className="flex flex-wrap items-center justify-between gap-x-3 gap-y-2 pb-4 border-b border-ink/10">
+        <div className="flex items-center gap-2 min-w-0">
           <h2 className="text-sm font-bold tracking-tight text-ink flex items-center gap-2">
-            <span>{copy.title}</span>
-            <span className="text-[10px] uppercase tracking-wider px-1.5 py-0.5 rounded border border-ink/15 text-ink/50 font-medium">
+            <span className="truncate">{copy.title}</span>
+            <span className="text-[10px] uppercase tracking-wider px-1.5 py-0.5 rounded border border-ink/15 text-ink/50 font-medium flex-shrink-0">
               {copy.badge}
             </span>
           </h2>
-          <div className="group relative">
+          <div className="group relative flex-shrink-0">
             <Info className="w-4 h-4 text-ink/40 cursor-help" />
-            <div className="absolute left-0 top-6 hidden group-hover:block w-80 p-2.5 rounded-lg bg-ink text-paper text-xs shadow-lg z-20 leading-relaxed pointer-events-none">
+            <div className="absolute left-0 top-6 hidden group-hover:block w-80 max-w-[80vw] p-2.5 rounded-lg bg-ink text-paper text-xs shadow-lg z-20 leading-relaxed pointer-events-none">
               {copy.tooltip}
             </div>
           </div>
         </div>
 
         {/* Action Buttons Top */}
-        <div className="flex items-center gap-2">
+        <div className="flex items-center gap-2 flex-shrink-0">
           <button
             type="button"
             onClick={handleCopy}

package/src/client/components/settings/categories/mcp-settings/ImportModal.tsx

@@ -100,7 +100,7 @@ export const McpImportModal: FunctionComponent<McpImportModalProps> = ({
 
   return (
     <div className="fixed inset-0 bg-ink/40 backdrop-blur-[2px] z-50 flex items-center justify-center p-4 animate-in fade-in duration-150">
-      <div className="w-full max-w-lg rounded-lg border border-ink/20 bg-paper text-ink p-5 shadow-2xl space-y-4">
+      <div className="w-full max-w-lg rounded-lg border border-ink/20 bg-paper text-ink p-5 shadow-2xl space-y-4 max-h-full overflow-y-auto scrollbar-overlay-container scrollbar-overlay-static">
         <div className="flex items-center justify-between pb-3 border-b border-ink/10">
           <div className="flex items-center gap-2">
             <Code className="w-4 h-4 text-ink/70" />