Thanks to visit codestin.com
Credit goes to github.com

Skip to content

fix(site): keep mobile model picker effort row and last model visible #27336

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
DanielleMaywood merged 4 commits into from
Jul 21, 2026
Merged

fix(site): keep mobile model picker effort row and last model visible #27336

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7b5a89a
fix(site): keep mobile model picker effort row and last model visible
DanielleMaywood Jul 20, 2026
f9cb278
test(site): cover mobile model picker effort row against clipping
DanielleMaywood Jul 20, 2026
f1945a3
test(site): pin mobile viewport for model picker story
DanielleMaywood Jul 20, 2026
aee03e9
test(site): capture mobile model picker at mobile width in visual gate
DanielleMaywood Jul 21, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 12 additions & 4 deletions site/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,13 +83,21 @@
calc(100vh - var(--mobile-dropdown-above-composer-bottom, 9rem) - 1rem)
) !important;
overflow: hidden !important;
display: flex !important;
flex-direction: column !important;
}
/* min-height: 0 on both flex children lets the list shrink below its
content and scroll inside the capped column instead of overflowing. */
.mobile-full-width-dropdown-above-composer > [cmdk-root],
Comment thread
DanielleMaywood marked this conversation as resolved.
.mobile-full-width-dropdown-above-composer > [cmdk-root] > [cmdk-list] {
flex: 1 1 0% !important;
min-height: 0 !important;
Comment thread
DanielleMaywood marked this conversation as resolved.
}
.mobile-full-width-dropdown-above-composer > [cmdk-root] > [cmdk-list] {
max-height: none !important;
}
.mobile-full-width-dropdown-above-composer
.mobile-full-width-dropdown-scroll-area {
max-height: calc(
var(--mobile-dropdown-above-composer-max-height, 18rem) -
0.5rem
) !important;
overflow-y: auto !important;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
Expand Down
53 changes: 52 additions & 1 deletion site/src/pages/AgentsPage/components/ChatElements/ModelSelector.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import type { Meta, StoryObj } from "@storybook/react-vite";
import { useState } from "react";
import { useEffect, useState } from "react";
import { expect, fn, screen, userEvent, waitFor, within } from "storybook/test";
import { ModelSelector, type ModelSelectorOption } from "./ModelSelector";
import { MockModelSelectorOption } from "./modelSelectorFixtures";
Expand Down Expand Up @@ -450,3 +450,54 @@ export const EffortRowClampedToMax: Story = {
});
},
};

// The pinned effort row must stay inside the mobile dropdown's capped
// height above the composer while the model list scrolls.
export const MobileEffortRow: Story = {
Comment thread
DanielleMaywood marked this conversation as resolved.
args: {
options: [
...Array.from({ length: 30 }, (_, index) => ({
...MockModelSelectorOption,
id: `openai/model-${index}`,
model: `model-${index}`,
displayName: `Model ${index}`,
})),
effortModel,
],
value: "openai/gpt-5",
reasoningEffort: "medium",
onReasoningEffortChange: fn(),
enableMobileFullWidthDropdown: true,
},
parameters: {
// The interaction runner defaults to a desktop width where the
// mobile dropdown CSS never applies, so pin a mobile viewport.
viewport: { defaultViewport: "mobile1" },
// Capture the visual snapshot at a mobile width so the pinned
// effort row and scrollable list render in the CI visual gate.
lostpixel: { breakpoints: [320] },
},
decorators: [
(Story) => {
useEffect(() => {
// Tight enough that the model list plus the pinned effort row
// overflow the dropdown, forcing the layout under test.
const root = document.documentElement.style;
root.setProperty(
"--mobile-dropdown-above-composer-max-height",
"260px",
Comment thread
DanielleMaywood marked this conversation as resolved.
);
return () => {
root.removeProperty("--mobile-dropdown-above-composer-max-height");
};
}, []);
return <Story />;
},
],
play: async ({ canvasElement }) => {
// Open the picker so the snapshot captures the dropdown, the pinned
// effort row, and the scrollable list.
await userEvent.click(within(canvasElement).getByRole("combobox"));
await within(document.body).findByRole("listbox");
},
};
Loading