From 26d3b9fd1d27c8d2aeb8e835cd0ba7623f777b19 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Tue, 8 Sep 2026 19:33:24 +0000
Subject: [PATCH 1/3] Fix switch geometry and trailing alignment across
 Settings

Keep the shared Switch pill from being restyled as a flex button, so the
thumb matches Plugins. Trailing switch rows stay compact and unclipped
in Field, Appearance, Memory, shortcuts, and scheduled-task lists.

Co-authored-by: Sambit Biswas <sambitcreate@users.noreply.github.com>
---
 renderer/components/git-push-dialog.tsx       |  2 +-
 renderer/components/scheduled-tasks-view.tsx  |  2 +-
 .../settings/memory-settings.test.tsx         |  2 ++
 .../components/settings/memory-settings.tsx   | 16 +++++-----
 .../settings/remote-access-settings.tsx       |  2 +-
 .../settings/settings-design.test.tsx         |  8 ++++-
 .../components/settings/shortcut-settings.tsx |  2 +-
 renderer/components/ui.tsx                    |  8 ++---
 .../lib/button-appearance-contract.test.ts    |  2 ++
 renderer/shared/appearance.test.ts            |  2 +-
 renderer/styles.css                           | 30 +++++++++++++++----
 11 files changed, 52 insertions(+), 24 deletions(-)

diff --git a/renderer/components/git-push-dialog.tsx b/renderer/components/git-push-dialog.tsx
index ce28e90b..3ebbabfa 100644
--- a/renderer/components/git-push-dialog.tsx
+++ b/renderer/components/git-push-dialog.tsx
@@ -214,7 +214,7 @@ export function GitPushDialog({
               </div>
             </div>
 
-            <Label className="items-start justify-between rounded-control border border-field px-3 py-2.5">
+            <Label className="items-center justify-between rounded-control border border-field px-3 py-2.5">
               <span className="min-w-0 pr-3">
                 <span className="block text-regular text-primary">Remember as upstream</span>
                 <span className="mt-0.5 block text-small text-secondary">
diff --git a/renderer/components/scheduled-tasks-view.tsx b/renderer/components/scheduled-tasks-view.tsx
index 473480ee..49759baf 100644
--- a/renderer/components/scheduled-tasks-view.tsx
+++ b/renderer/components/scheduled-tasks-view.tsx
@@ -597,7 +597,7 @@ export function ScheduledTasksView() {
                   />
                 </div>
               ) : (
-                <div className="overflow-hidden rounded-card bg-well">
+                <div className="overflow-visible rounded-card bg-well">
                   {visible.map((task, index) => {
                     const status = statusPresentation(task);
                     const busy = busyTaskId === task.id;
diff --git a/renderer/components/settings/memory-settings.test.tsx b/renderer/components/settings/memory-settings.test.tsx
index 27b3bcfd..e1ba1516 100644
--- a/renderer/components/settings/memory-settings.test.tsx
+++ b/renderer/components/settings/memory-settings.test.tsx
@@ -10,6 +10,8 @@ test("Memory settings expose authoritative global and workspace switches", () =>
   assert.match(settings, /workspacesApi\.update\(workspace\.id, \{ memoryEnabled: enabled \}\)/u);
   assert.match(settings, /Existing approved[\s\S]*stay on this Mac/u);
   assert.match(settings, /Bot memory has its own scope/u);
+  assert.match(settings, /<\/FieldSet>\s*<Text as="p"[\s\S]*Existing approved/u);
+  assert.match(settings, /<\/FieldSet>\s*<Text as="p"[\s\S]*Workspace switches affect/u);
 });
 
 test("the chat toolbar no longer exposes the manual memory manager", () => {
diff --git a/renderer/components/settings/memory-settings.tsx b/renderer/components/settings/memory-settings.tsx
index b2e92135..db6ebdaf 100644
--- a/renderer/components/settings/memory-settings.tsx
+++ b/renderer/components/settings/memory-settings.tsx
@@ -124,11 +124,11 @@ export function MemorySettings() {
             aria-label="Use memory globally"
           />
         </Field>
-        <Text as="p" variant="small" color="secondary" className="px-4 pb-4 text-pretty">
-          Turning memory off stops memory tools, prompt context, and new indexing. Existing approved
-          facts stay on this Mac and become available again if you turn it back on.
-        </Text>
       </FieldSet>
+      <Text as="p" variant="small" color="secondary" className="text-pretty">
+        Turning memory off stops memory tools, prompt context, and new indexing. Existing approved
+        facts stay on this Mac and become available again if you turn it back on.
+      </Text>
 
       <FieldSet title="Workspaces">
         {workspaces.isLoading ? (
@@ -159,11 +159,11 @@ export function MemorySettings() {
             No workspaces yet.
           </Text>
         )}
-        <Text as="p" variant="small" color="secondary" className="px-4 pb-4 text-pretty">
-          Workspace switches affect regular workspace chats. Bot memory has its own scope and
-          follows the global switch.
-        </Text>
       </FieldSet>
+      <Text as="p" variant="small" color="secondary" className="text-pretty">
+        Workspace switches affect regular workspace chats. Bot memory has its own scope and
+        follows the global switch.
+      </Text>
     </div>
   );
 }
diff --git a/renderer/components/settings/remote-access-settings.tsx b/renderer/components/settings/remote-access-settings.tsx
index 6ed4f86d..cb823b2f 100644
--- a/renderer/components/settings/remote-access-settings.tsx
+++ b/renderer/components/settings/remote-access-settings.tsx
@@ -526,7 +526,7 @@ export function RemoteAccessSettings() {
           )}
           description="Connect Aiden On The Go while Aiden is running."
         >
-          <div className="flex items-center justify-end gap-2 max-[540px]:justify-start">
+          <div className="flex items-center justify-end gap-2">
             {busy === "enabled" ? <Loader2 className="size-4 animate-spin text-secondary" /> : null}
             <Badge color={status.running ? "green" : status.error ? "red" : undefined}>{summary}</Badge>
             <Switch
diff --git a/renderer/components/settings/settings-design.test.tsx b/renderer/components/settings/settings-design.test.tsx
index 5ea36f0f..10721347 100644
--- a/renderer/components/settings/settings-design.test.tsx
+++ b/renderer/components/settings/settings-design.test.tsx
@@ -29,8 +29,14 @@ test("every settings destination uses the shared page and grouped row system", (
   assert.match(css, /--settings-card-fill:/u);
   assert.match(
     css,
-    /settings-field-horizontal:has\(> \.settings-field-control > \[role="switch"\]\)/u,
+    /settings-field-horizontal:has\(\.settings-field-control \[role="switch"\]\)/u,
   );
+  assert.doesNotMatch(
+    css,
+    /settings-field-control > \[role="switch"\][\s\S]{0,80}display:\s*flex/u,
+  );
+  assert.match(css, /@container settings-content \(max-width: 540px\)[\s\S]*settings-field-horizontal:has\(\.settings-field-control \[role="switch"\]\)/u);
+  assert.match(ui, /settings-group-card overflow-visible/u);
   assert.match(css, /outline: 2px solid var\(--focus-ring\)/u);
 });
 
diff --git a/renderer/components/settings/shortcut-settings.tsx b/renderer/components/settings/shortcut-settings.tsx
index 0fdfaa08..1852cb90 100644
--- a/renderer/components/settings/shortcut-settings.tsx
+++ b/renderer/components/settings/shortcut-settings.tsx
@@ -84,7 +84,7 @@ function ShortcutRow({
 
   return (
     <div className="px-4 py-3.5 after:mt-3.5 after:block after:h-px after:bg-separator last:after:hidden">
-      <div className="flex items-start gap-3">
+      <div className="flex items-center gap-3">
         <div className="min-w-0 flex-1">
           <div className="flex flex-wrap items-center gap-2">
             <Text variant="strong">{command.title}</Text>
diff --git a/renderer/components/ui.tsx b/renderer/components/ui.tsx
index fe69c35f..3db2296a 100644
--- a/renderer/components/ui.tsx
+++ b/renderer/components/ui.tsx
@@ -305,7 +305,7 @@ export function FieldSet({
   return (
     <section className={cn("settings-group mb-7", className)}>
       {title ? <h2 className="settings-group-title mb-3 px-4 text-large-strong text-primary">{title}</h2> : null}
-      <div className="settings-group-card overflow-hidden rounded-card bg-well">{children}</div>
+      <div className="settings-group-card overflow-visible rounded-card bg-well">{children}</div>
     </section>
   );
 }
@@ -332,7 +332,7 @@ export function Field({
       className={cn(
         "settings-field relative p-4 after:absolute after:inset-x-4 after:bottom-0 after:h-px after:bg-separator last:after:hidden",
         orientation === "horizontal"
-          ? "settings-field-horizontal grid min-h-12 grid-cols-[minmax(120px,0.8fr)_minmax(160px,1.2fr)] items-center gap-5 max-[540px]:grid-cols-1 max-[540px]:items-start max-[540px]:gap-2"
+          ? "settings-field-horizontal grid min-h-12 grid-cols-[minmax(120px,0.8fr)_minmax(160px,1.2fr)] items-center gap-5 has-[[role=switch]]:grid-cols-[minmax(0,1fr)_auto] max-[540px]:grid-cols-1 max-[540px]:items-start max-[540px]:has-[[role=switch]]:grid-cols-[minmax(0,1fr)_auto] max-[540px]:has-[[role=switch]]:items-center max-[540px]:gap-2"
           : "flex flex-col gap-3",
         className,
       )}
@@ -1423,12 +1423,12 @@ export const Switch = React.forwardRef<
     <SwitchPrimitive.Root
       ref={ref}
       className={cn(
-        "relative h-6 w-10 rounded-pill bg-control-hover shadow-control-pressed outline-none transition-[background-color,box-shadow,opacity] duration-150 ease-out hover:bg-control-active focus-visible:bg-control-active focus-visible:outline-none data-[state=checked]:bg-accent data-[state=checked]:shadow-control data-[state=checked]:hover:bg-accent-hover data-[state=checked]:focus-visible:bg-accent-hover disabled:pointer-events-none disabled:opacity-45",
+        "relative inline-flex h-6 w-10 shrink-0 items-center overflow-visible rounded-pill bg-control-hover shadow-control-pressed outline-none transition-[background-color,box-shadow,opacity] duration-150 ease-out hover:bg-control-active focus-visible:bg-control-active focus-visible:outline-none data-[state=checked]:bg-accent data-[state=checked]:shadow-control data-[state=checked]:hover:bg-accent-hover data-[state=checked]:focus-visible:bg-accent-hover disabled:pointer-events-none disabled:opacity-45",
         className,
       )}
       {...props}
     >
-      <SwitchPrimitive.Thumb className="block size-5 translate-x-0.5 rounded-full bg-white shadow-control transition-[background-color,transform] duration-150 ease-out data-[state=checked]:translate-x-[18px] data-[state=checked]:bg-accent-foreground" />
+      <SwitchPrimitive.Thumb className="pointer-events-none block size-5 shrink-0 translate-x-0.5 rounded-full bg-white shadow-control transition-[background-color,transform] duration-150 ease-out data-[state=checked]:translate-x-[18px] data-[state=checked]:bg-accent-foreground" />
     </SwitchPrimitive.Root>
   );
 });
diff --git a/renderer/lib/button-appearance-contract.test.ts b/renderer/lib/button-appearance-contract.test.ts
index d9a6cb63..8f430a66 100644
--- a/renderer/lib/button-appearance-contract.test.ts
+++ b/renderer/lib/button-appearance-contract.test.ts
@@ -32,6 +32,8 @@ test("legacy actions and button links share the shape without clipping or changi
   assert.match(rule[1], /corner-shape: squircle/u);
   assert.doesNotMatch(rule[1], /overflow|clip-path|outline/u);
   assert.match(styles, /--radius-button: 16px/u);
+  assert.match(uiSource, /inline-flex h-6 w-10 shrink-0 items-center overflow-visible/u);
+  assert.doesNotMatch(styles, /\.settings-field-control > \[role="switch"\][\s\S]{0,60}display:\s*flex/u);
 });
 
 test("design guidance and interactive specimen document reusable button and composer geometry", () => {
diff --git a/renderer/shared/appearance.test.ts b/renderer/shared/appearance.test.ts
index 1a6cbb5c..772d69b6 100644
--- a/renderer/shared/appearance.test.ts
+++ b/renderer/shared/appearance.test.ts
@@ -357,7 +357,7 @@ test("the shared focus treatment separates text entry from non-text keyboard foc
   );
   assert.match(
     ui,
-    /SwitchPrimitive\.Thumb className="[^"]*bg-white[^"]*data-\[state=checked\]:bg-accent-foreground[^"]*"/u,
+    /SwitchPrimitive\.Root[\s\S]*inline-flex h-6 w-10 shrink-0 items-center overflow-visible[\s\S]*SwitchPrimitive\.Thumb className="[^"]*pointer-events-none[^"]*bg-white[^"]*data-\[state=checked\]:bg-accent-foreground[^"]*"/u,
   );
   assert.match(assistantBubble, /bg-support-red[\s\S]*?text-support-red-foreground/u);
 });
diff --git a/renderer/styles.css b/renderer/styles.css
index 1081f7a6..d9773ae6 100644
--- a/renderer/styles.css
+++ b/renderer/styles.css
@@ -1204,15 +1204,19 @@ textarea {
   max-width: 100%;
 }
 
-/* Compact controls stay at the trailing edge, even when the row wraps. */
-.settings-page .settings-field-control > button,
-.settings-page .settings-field-control > [role="switch"] {
+/* Trailing compact controls, including switches wrapped in status/action clusters. */
+.settings-page .settings-field-horizontal > .settings-field-control {
   display: flex;
-  margin-left: auto;
+  align-items: center;
+  justify-content: flex-end;
 }
 
+.settings-page .settings-field-control [role="switch"] {
+  flex: 0 0 auto;
+  max-width: none;
+}
 
-.settings-page .settings-field-horizontal:has(> .settings-field-control > [role="switch"]) {
+.settings-page .settings-field-horizontal:has(.settings-field-control [role="switch"]) {
   grid-template-columns: minmax(0, 1fr) auto;
   align-items: center;
 }
@@ -1240,6 +1244,11 @@ textarea {
     gap: 8px;
   }
 
+  .settings-page .settings-field-horizontal:has(.settings-field-control [role="switch"]) {
+    grid-template-columns: minmax(0, 1fr) auto;
+    align-items: center;
+  }
+
   .settings-page-heading.flex {
     flex-wrap: wrap;
   }
@@ -2094,7 +2103,7 @@ textarea {
 
 .appearance-editor-card,
 .appearance-preferences-card {
-  overflow: hidden;
+  overflow: visible;
   border: 1px solid var(--border-separator);
   border-radius: var(--settings-card-radius, 16px);
   background: var(--settings-card-fill, color-mix(in srgb, var(--surface-popover) 72%, transparent));
@@ -2444,10 +2453,19 @@ textarea {
     gap: 7px;
     padding-block: 12px;
   }
+  .appearance-editor-row:has([role="switch"]),
+  .appearance-preference-row:has([role="switch"]) {
+    grid-template-columns: minmax(0, 1fr) auto;
+    align-items: center;
+  }
   .appearance-editor-row > div,
   .appearance-preference-control {
     justify-content: flex-start;
   }
+  .appearance-editor-row:has([role="switch"]) > div,
+  .appearance-preference-row:has([role="switch"]) .appearance-preference-control {
+    justify-content: flex-end;
+  }
   .appearance-value-select,
   .appearance-range-control {
     width: 100%;

From 8e461d28c25e93c68b31a60124232a5d4355cf9b Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Tue, 8 Sep 2026 20:27:56 +0000
Subject: [PATCH 2/3] Keep Model Pad chrome stable while surrounding copy
 changes

Reserve axis/legend height instead of measuring live canvas-minus-square
geometry, cap the square to the visible scrollport, and give composer
model details a fixed card so picking models no longer resizes the pad.

Co-authored-by: Sambit Biswas <sambitcreate@users.noreply.github.com>
---
 docs/settings-design-system.md                |  2 +-
 renderer/components/composer.test.tsx         |  2 +-
 renderer/components/model-picker.tsx          |  6 ++-
 .../settings/model-pad-settings.test.tsx      | 12 ++++++
 .../settings/model-pad-settings.tsx           | 22 ++++++----
 renderer/lib/model-pad-layout.test.ts         | 41 +++++++++++++++++++
 renderer/lib/model-pad-layout.ts              | 26 ++++++++++++
 renderer/styles.css                           |  8 ++++
 tests/e2e/model-pad-responsive.spec.ts        |  4 ++
 9 files changed, 110 insertions(+), 13 deletions(-)

diff --git a/docs/settings-design-system.md b/docs/settings-design-system.md
index ad2d1161..78af6074 100644
--- a/docs/settings-design-system.md
+++ b/docs/settings-design-system.md
@@ -15,7 +15,7 @@ The `.settings-responsive` container defines `--settings-card-radius`, `--settin
 
 Rows respond to their allocated content width, not the whole window. Below 540px complex controls stack under descriptions, while switches remain on the right. Grid groups must use `minmax(0, 1fr)` / `grid-cols-1` so long provider names or endpoints cannot force horizontal overflow. Controls and text must stay reachable without horizontal page scrolling.
 
-Model Pad measures the actual scrollport, wrapped toolbar, labels, and legend. Its square is constrained by both remaining height and column width. On very short or highly zoomed windows, it retains a usable 160px square and the Settings page scrolls; the Pad and its labels remain reachable. Ordinary window allocations show the full canvas and legend together. Opening model or benchmark panels uses the same measurement.
+Model Pad measures the actual scrollport and remaining column. Axis captions and the legend use a reserved height so the square outline stays put while surrounding copy, marker labels, and catalog text change. The square is constrained by remaining height, column width, and the visible scrollport. On very short or highly zoomed windows, it keeps a usable canvas (160px when the scrollport allows) and the Settings page scrolls; the Pad and its labels remain reachable. Ordinary window allocations show the full canvas and legend together. Opening model or benchmark panels uses the same measurement.
 
 ## Workspace labels
 
diff --git a/renderer/components/composer.test.tsx b/renderer/components/composer.test.tsx
index fa3ed992..53c3651e 100644
--- a/renderer/components/composer.test.tsx
+++ b/renderer/components/composer.test.tsx
@@ -285,7 +285,7 @@ test("model picker details sit beside the menu without overlapping the pad", ()
   );
   assert.match(
     modelPicker,
-    /className="pointer-events-none w-56 shrink-0 rounded-popover bg-popover p-3 text-primary shadow-popover"/u,
+    /className="pointer-events-auto flex h-\[min\(22\.5rem,70vh\)\] w-56 shrink-0 flex-col overflow-hidden rounded-popover bg-popover p-3 text-primary shadow-popover"/u,
   );
   assert.doesNotMatch(modelPicker, /left-\[calc\(100%\+0\.5rem\)\]/u);
   assert.doesNotMatch(modelPicker, /right: showExternalDetails/u);
diff --git a/renderer/components/model-picker.tsx b/renderer/components/model-picker.tsx
index 4efc7f6b..103eb7af 100644
--- a/renderer/components/model-picker.tsx
+++ b/renderer/components/model-picker.tsx
@@ -257,7 +257,8 @@ function ModelHoverDetails({
   ].filter((row): row is [string, string] => Boolean(row));
 
   return (
-    <aside className="pointer-events-none w-56 shrink-0 rounded-popover bg-popover p-3 text-primary shadow-popover">
+    <aside className="pointer-events-auto flex h-[min(22.5rem,70vh)] w-56 shrink-0 flex-col overflow-hidden rounded-popover bg-popover p-3 text-primary shadow-popover">
+      <div className="flex min-h-0 min-w-0 flex-1 flex-col overflow-y-auto overscroll-contain">
       <div className="flex min-w-0 items-start gap-2">
         <span className="mt-0.5 shrink-0 text-tertiary">
           <ProviderIcon
@@ -321,7 +322,7 @@ function ModelHoverDetails({
             href={attributionUrl}
             target="_blank"
             rel="noreferrer"
-            className="pointer-events-auto mt-1 inline-block text-mini leading-4 text-tertiary underline decoration-separator underline-offset-2 hover:text-secondary"
+            className="mt-1 inline-block text-mini leading-4 text-tertiary underline decoration-separator underline-offset-2 hover:text-secondary"
           >
             {info?.benchmark
               ? `${info.benchmark.sourceLabel} · ${info.benchmark.license}`
@@ -329,6 +330,7 @@ function ModelHoverDetails({
           </a>
         ) : null}
       </div>
+      </div>
     </aside>
   );
 }
diff --git a/renderer/components/settings/model-pad-settings.test.tsx b/renderer/components/settings/model-pad-settings.test.tsx
index 0c2a424f..1e70459b 100644
--- a/renderer/components/settings/model-pad-settings.test.tsx
+++ b/renderer/components/settings/model-pad-settings.test.tsx
@@ -107,6 +107,18 @@ test("Model Pad progressively discloses supporting and advanced controls", () =>
   );
   assert.match(styles, /\.model-pad-canvas\s*\{\s*width: min\(100%, 40rem\)/u);
   assert.match(styles, /\.model-pad\s*\{\s*width: min\(100%, var\(--model-pad-available-size/u);
+  assert.match(source, /measureModelPadAvailableSize/u);
+  assert.match(source, /observer\.observe\(grid\)/u);
+  assert.doesNotMatch(source, /labelsHeight/u);
+  assert.doesNotMatch(
+    source,
+    /canvas\.getBoundingClientRect\(\)\.height - pad\.getBoundingClientRect\(\)\.height/u,
+  );
+  assert.match(
+    styles,
+    /\.model-pad\s*\{[\s\S]*aspect-ratio: 1 \/ 1;[\s\S]*flex-shrink: 0/u,
+  );
+  assert.match(styles, /\.model-pad-legend\s*\{\s*min-height: 2\.5rem/u);
   assert.match(styles, /@container model-pad-fieldset \(max-width: 760px\)/u);
   assert.match(
     styles,
diff --git a/renderer/components/settings/model-pad-settings.tsx b/renderer/components/settings/model-pad-settings.tsx
index 597d729e..eae33fcf 100644
--- a/renderer/components/settings/model-pad-settings.tsx
+++ b/renderer/components/settings/model-pad-settings.tsx
@@ -42,6 +42,7 @@ import {
   reflowVisibleModelPadPlacements,
   snapToModelPadGrid,
   writeModelPadLayout,
+  measureModelPadAvailableSize,
   MODEL_PAD_INSET_PERCENT,
   MODEL_PAD_RANGE_PERCENT,
   type ModelPadDirection,
@@ -388,14 +389,19 @@ export function ModelPadSettings() {
     let frame = 0;
     const measure = () => {
       frame = 0;
+      const scrollportRect = scrollport?.getBoundingClientRect();
       const viewportBottom = Math.min(
         window.innerHeight,
-        scrollport?.getBoundingClientRect().bottom ?? window.innerHeight,
+        scrollportRect?.bottom ?? window.innerHeight,
       );
       // Compensate for page scrolling so scrolling down never grows the Pad.
       const canvasTop = canvas.getBoundingClientRect().top + (scrollport?.scrollTop ?? 0);
-      const labelsHeight = canvas.getBoundingClientRect().height - pad.getBoundingClientRect().height;
-      const size = Math.floor(Math.max(160, viewportBottom - canvasTop - labelsHeight - 24));
+      const size = measureModelPadAvailableSize({
+        viewportBottom,
+        canvasTop,
+        canvasWidth: canvas.clientWidth,
+        scrollportClientHeight: scrollport?.clientHeight ?? window.innerHeight,
+      });
       const value = `${size}px`;
       if (grid.style.getPropertyValue("--model-pad-available-size") !== value) {
         grid.style.setProperty("--model-pad-available-size", value);
@@ -405,12 +411,10 @@ export function ModelPadSettings() {
       if (!frame) frame = requestAnimationFrame(measure);
     };
     const observer = new ResizeObserver(schedule);
-    // Include ancestors to catch a title or toolbar wrapping after a font or
-    // window change, and labels to converge when a narrow legend wraps.
-    for (let element: HTMLElement | null = canvas; element; element = element.parentElement) {
-      observer.observe(element);
-      if (element === scrollport) break;
-    }
+    // Watch the grid and scrollport only. Observing the canvas height (labels +
+    // square) fed legend wrapping back into the square size and made the outline jump.
+    observer.observe(grid);
+    if (scrollport) observer.observe(scrollport);
     measure();
     window.addEventListener("resize", schedule);
     return () => {
diff --git a/renderer/lib/model-pad-layout.test.ts b/renderer/lib/model-pad-layout.test.ts
index 67edfb77..3c89a481 100644
--- a/renderer/lib/model-pad-layout.test.ts
+++ b/renderer/lib/model-pad-layout.test.ts
@@ -3,6 +3,10 @@ import test from "node:test";
 import {
   distributeCapabilityOnlyModelPadSuggestions,
   emptyModelPadLayout,
+  measureModelPadAvailableSize,
+  MODEL_PAD_MIN_SIZE_PX,
+  MODEL_PAD_SETTINGS_CHROME_PX,
+  MODEL_PAD_VIEWPORT_GUTTER_PX,
   modelPadGridSize,
   modelPadLayoutsEqual,
   modelPadPointKey,
@@ -215,6 +219,43 @@ test("capability-only distribution fails closed for invalid and duplicate sugges
   assert.equal(placements.valid.y, 5 / 6);
 });
 
+test("Model Pad available size ignores label wrap and never exceeds the scrollport", () => {
+  const canvasTop = 120;
+  const viewportBottom = 600;
+  const canvasWidth = 480;
+  const scrollportClientHeight = 360;
+  const size = measureModelPadAvailableSize({
+    viewportBottom,
+    canvasTop,
+    canvasWidth,
+    scrollportClientHeight,
+  });
+  const heightBudget =
+    viewportBottom - canvasTop - MODEL_PAD_SETTINGS_CHROME_PX - MODEL_PAD_VIEWPORT_GUTTER_PX;
+  assert.equal(
+    size,
+    Math.floor(Math.min(scrollportClientHeight - 1, canvasWidth, heightBudget)),
+  );
+  assert.ok(size <= scrollportClientHeight);
+  assert.equal(
+    measureModelPadAvailableSize({
+      viewportBottom: 800,
+      canvasTop: 100,
+      canvasWidth: 500,
+      scrollportClientHeight: 140,
+    }),
+    139,
+  );
+  assert.ok(
+    measureModelPadAvailableSize({
+      viewportBottom: 400,
+      canvasTop: 280,
+      canvasWidth: 400,
+      scrollportClientHeight: 500,
+    }) >= MODEL_PAD_MIN_SIZE_PX,
+  );
+});
+
 test("keyboard movement advances by nodes and skips occupied points on its axis", () => {
   const next = moveModelPadPoint({ x: 0.5, y: 0.5 }, "right", 1, 7, [{ x: 4 / 6, y: 0.5 }]);
   assert.deepEqual(next, { x: 5 / 6, y: 0.5 });
diff --git a/renderer/lib/model-pad-layout.ts b/renderer/lib/model-pad-layout.ts
index bbd8f06f..4efdaed7 100644
--- a/renderer/lib/model-pad-layout.ts
+++ b/renderer/lib/model-pad-layout.ts
@@ -8,6 +8,32 @@ export const BASE_MODEL_PAD_GRID_SIZE = 7;
 export const MODEL_PAD_GRID_DENSITY = 6;
 export const MODEL_PAD_INSET_PERCENT = 8;
 export const MODEL_PAD_RANGE_PERCENT = 100 - MODEL_PAD_INSET_PERCENT * 2;
+export const MODEL_PAD_MIN_SIZE_PX = 160;
+/** Gutter below the measured canvas so the square does not kiss the scrollport edge. */
+export const MODEL_PAD_VIEWPORT_GUTTER_PX = 24;
+/**
+ * Reserved height for the two axis captions and the legend. Using a fixed
+ * reservation keeps the square outline stable when legend copy wraps or
+ * marker labels appear; those must not feed back into `--model-pad-available-size`.
+ */
+export const MODEL_PAD_SETTINGS_CHROME_PX = 128;
+
+export function measureModelPadAvailableSize(input: {
+  viewportBottom: number;
+  canvasTop: number;
+  canvasWidth: number;
+  scrollportClientHeight: number;
+}): number {
+  const heightBudget =
+    input.viewportBottom -
+    input.canvasTop -
+    MODEL_PAD_SETTINGS_CHROME_PX -
+    MODEL_PAD_VIEWPORT_GUTTER_PX;
+  const preferred = Math.min(input.canvasWidth, heightBudget);
+  const scrollportCap = Math.max(0, input.scrollportClientHeight - 1);
+  const size = Math.min(scrollportCap, Math.max(MODEL_PAD_MIN_SIZE_PX, preferred));
+  return Math.floor(Math.max(0, size));
+}
 
 export type ModelPadPlacementSource = "user" | "benchmark" | "neutral";
 
diff --git a/renderer/styles.css b/renderer/styles.css
index d9773ae6..9d2980c1 100644
--- a/renderer/styles.css
+++ b/renderer/styles.css
@@ -777,6 +777,10 @@ textarea {
 
 .model-pad {
   width: min(100%, var(--model-pad-available-size, max(10rem, calc(100dvh - 24rem))));
+  min-width: 0;
+  aspect-ratio: 1 / 1;
+  flex-shrink: 0;
+  align-self: start;
   margin-inline: auto;
   cursor: crosshair;
   contain: layout paint;
@@ -949,6 +953,10 @@ textarea {
   transform: translate(0, 0) scale(1);
 }
 
+.model-pad-legend {
+  min-height: 2.5rem;
+}
+
 .model-pad-legend-marker {
   display: inline-block;
   width: 0.75rem;
diff --git a/tests/e2e/model-pad-responsive.spec.ts b/tests/e2e/model-pad-responsive.spec.ts
index 7d864dda..8d10367b 100644
--- a/tests/e2e/model-pad-responsive.spec.ts
+++ b/tests/e2e/model-pad-responsive.spec.ts
@@ -51,6 +51,10 @@ test("Model Pad fits resized settings and keeps models usable at native zoom", a
     for (const panel of ["closed", "models", "insights"] as const) {
       if (panel === "models") await browse.click();
       if (panel === "insights") await insights.click();
+      await page.evaluate(async () => {
+        const animations = document.getAnimations?.() ?? [];
+        await Promise.all(animations.map((animation) => animation.finished.catch(() => undefined)));
+      });
       await page.locator(".model-pad-fieldset").evaluate((element) => {
         let parent = element.parentElement;
         while (parent && !/(auto|scroll)/u.test(getComputedStyle(parent).overflowY))

From a289627cce7b62f4b6f08a3341da7e2f9ff86d6f Mon Sep 17 00:00:00 2001
From: Sambit Biswas <sambit.biswas2@gmail.com>
Date: Wed, 9 Sep 2026 11:51:29 -0400
Subject: [PATCH 3/3] Bound Model Pad animation stabilization

---
 .papercuts/troubleshooting.md          |  2 ++
 tests/e2e/model-pad-responsive.spec.ts | 23 +++++++++++++++++++----
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/.papercuts/troubleshooting.md b/.papercuts/troubleshooting.md
index 57ff5f79..c4e413b8 100644
--- a/.papercuts/troubleshooting.md
+++ b/.papercuts/troubleshooting.md
@@ -1,5 +1,7 @@
 # Troubleshooting
 
+- `.papercuts/` is ignored even when its troubleshooting file is present in the PR branch, so persisting a required update needs an explicit `git add -f`.
+- Layout stabilization must race `animation.finished` against a short timeout because paused or infinite document animations never settle; keep geometry polling as the authoritative E2E readiness check.
 - Pi 0.80.10 can choose the oldest oversized user turn as `firstKeptEntryId`, leaving both summary inputs empty and producing a no-op checkpoint. When the journal has a newer turn, retry `prepareCompaction` with a minimal retained-tail budget; still refuse the checkpoint if both summary inputs remain empty.
 - `Session.getEntries()` includes abandoned branches. Synchronization markers must be read from `Session.getBranch()` or a rolled-back partial write can still look committed.
 - Child-runtime unit tests load outside Electron. Keep usage accounting behind an injected callback (with a production-only dynamic import) instead of statically importing the Electron-backed singleton into the reusable child registry.
diff --git a/tests/e2e/model-pad-responsive.spec.ts b/tests/e2e/model-pad-responsive.spec.ts
index 8d10367b..22de6011 100644
--- a/tests/e2e/model-pad-responsive.spec.ts
+++ b/tests/e2e/model-pad-responsive.spec.ts
@@ -28,6 +28,15 @@ test("Model Pad fits resized settings and keeps models usable at native zoom", a
   const pad = page.getByRole("group", { name: "Personal Model Pad arrangement", exact: true });
   const browse = page.getByRole("button", { name: "Browse models", exact: true });
   const insights = page.getByRole("button", { name: "Benchmark insights", exact: true });
+  await page.evaluate(() => {
+    const sentinel = document.createElement("span");
+    sentinel.style.cssText = "position:fixed;width:1px;height:1px;pointer-events:none;opacity:0";
+    document.body.append(sentinel);
+    sentinel.animate([{ transform: "rotate(0deg)" }, { transform: "rotate(360deg)" }], {
+      duration: 1_000,
+      iterations: Infinity,
+    });
+  });
 
   for (const [width, height, zoom] of [
     [1440, 1000, 1],
@@ -51,10 +60,16 @@ test("Model Pad fits resized settings and keeps models usable at native zoom", a
     for (const panel of ["closed", "models", "insights"] as const) {
       if (panel === "models") await browse.click();
       if (panel === "insights") await insights.click();
-      await page.evaluate(async () => {
-        const animations = document.getAnimations?.() ?? [];
-        await Promise.all(animations.map((animation) => animation.finished.catch(() => undefined)));
-      });
+      await page.evaluate(async (settleTimeoutMs) => {
+        const animations = (document.getAnimations?.() ?? []).filter((animation) => {
+          const endTime = animation.effect?.getComputedTiming().endTime;
+          return typeof endTime === "number" && Number.isFinite(endTime);
+        });
+        await Promise.race([
+          Promise.allSettled(animations.map((animation) => animation.finished)),
+          new Promise<void>((resolve) => window.setTimeout(resolve, settleTimeoutMs)),
+        ]);
+      }, 500);
       await page.locator(".model-pad-fieldset").evaluate((element) => {
         let parent = element.parentElement;
         while (parent && !/(auto|scroll)/u.test(getComputedStyle(parent).overflowY))