From c7fdc660422a75b6813434687c3f861858df5e96 Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Sat, 5 Sep 2026 01:36:19 +0000 Subject: [PATCH] Fix Model Pad picker overlap and double focus chrome Keep model details in the popover layout so they sit beside the List/Pad menu instead of painting over the canvas, and draw keyboard focus inside the pad so the global offset outline no longer forms a second ring. Co-authored-by: Sambit Biswas --- renderer/components/composer.test.tsx | 26 ++++++++++++++++++++++++ renderer/components/model-picker-pad.tsx | 2 +- renderer/components/model-picker.tsx | 20 ++++++++---------- renderer/styles.css | 10 +++++++++ 4 files changed, 46 insertions(+), 12 deletions(-) diff --git a/renderer/components/composer.test.tsx b/renderer/components/composer.test.tsx index 70f6439c..980da279 100644 --- a/renderer/components/composer.test.tsx +++ b/renderer/components/composer.test.tsx @@ -253,3 +253,29 @@ test("workspace access keyboard navigation moves focus without changing permissi assert.match(composer, /radios\?\.\[nextIndex\]\?\.focus\(\)/u); assert.doesNotMatch(composer, /requestPermission\(nextPermission\)/u); }); + +test("model picker details sit beside the menu without overlapping the pad", () => { + const modelPicker = source("./model-picker.tsx"); + const pad = source("./model-picker-pad.tsx"); + const styles = source("../styles.css"); + + assert.match( + modelPicker, + /className="flex w-max max-w-\[calc\(100vw-1\.5rem\)\] items-start gap-2 overflow-visible bg-transparent p-0 shadow-none"/u, + ); + assert.match( + modelPicker, + /className="relative w-\[min\(19\.75rem,calc\(100vw-1\.5rem\)\)\] overflow-hidden rounded-popover bg-popover shadow-popover"/u, + ); + assert.match( + modelPicker, + /className="pointer-events-none w-56 shrink-0 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); + assert.doesNotMatch(pad, /focus-visible:bg-list-selection/u); + assert.match( + styles, + /\.model-pad:focus-visible\s*\{\s*outline: none !important;\s*box-shadow:\s*inset 0 0 0 2px var\(--focus-ring\)/u, + ); +}); diff --git a/renderer/components/model-picker-pad.tsx b/renderer/components/model-picker-pad.tsx index 089a625a..467419c2 100644 --- a/renderer/components/model-picker-pad.tsx +++ b/renderer/components/model-picker-pad.tsx @@ -219,7 +219,7 @@ export function ModelPickerPad({ aria-describedby={helpId} aria-activedescendant={active ? modelOptionId(active.value) : undefined} data-dragging={dragging ? "true" : "false"} - className="model-pad relative aspect-square w-full touch-none overflow-hidden rounded-card outline-none focus-visible:bg-list-selection focus-visible:outline-none " + className="model-pad relative aspect-square w-full touch-none overflow-hidden rounded-card outline-none" onPointerDown={handlePointerDown} onPointerMove={handlePointerMove} onPointerUp={handlePointerUp} diff --git a/renderer/components/model-picker.tsx b/renderer/components/model-picker.tsx index d30a8f32..b0551a38 100644 --- a/renderer/components/model-picker.tsx +++ b/renderer/components/model-picker.tsx @@ -257,7 +257,7 @@ function ModelHoverDetails({ ].filter((row): row is [string, string] => Boolean(row)); return ( -