settings-provider-layout

Instruction file imported from lqdflying/chathub (.cursor/rules/settings-provider-layout.mdc). Copyright stays with the author.

Settings provider detail layout

How Settings → provider (native OpenAI, native xAI, and OpenAI Compatible) finally stayed inside the pane: two equal API-route pills, Check on the same row as the model select (minmax(0, 1fr) auto), visible enable switch at 768–800px. Apply this stack. Do not revive the failed approaches. Native xAI reuses the same shrink stack plus a Codex-style SuperGrok OAuth extra card (min-width: 0, stacked Sign out, wrap meters).

What actually works (keep)

These layers are all required. Fixing only the form, or only the toggle, is not enough.

1. Ancestor shrink. Desktop Settings is a flex child of the app shell. Default min-width: auto is min-content, so a form or Codex card widens the whole pane past the viewport. DESKTOP_SETTINGS_LAYOUT_STYLE and the provider detail / SettingContainer chain must set min-width: 0 (and max-width: 100% where the pane clips).
2. One-column form grid. LobeHub Form still paints .ant-row as horizontal space-between even when Ant layout="vertical". Do not put two width: 100% flex children in that row — they become ~2× the pane and overflow-x: hidden clips Responses / Check. Force the item row to display: grid; grid-template-columns: minmax(0, 1fr).
3. Owned route toggle. ProviderRouteToggle is a two-column CSS grid with inline track/item widths. Do not use antd Radio.Group block or @lobehub/ui Segmented block. Both start content-sized / inline-block, then CSS-in-JS injects flex ~1s after paint / setFieldsValue; the selected thumb becomes the full pane and the other label disappears.
4. Collapse title shrink. The enable switch lives in .ant-collapse-extra. antd header-text is flex: auto with min-width: auto, so the title keeps min-content and overflow: hidden on the header clips the switch at 768–800px. Shrink .ant-collapse-header-text (flex: 1 1 0, min-width: 0) and keep extra flex: none. Inner providerConfigTitleRowStyle alone is not enough.
5. Drop FORM_STYLE.itemMinWidth. max(34%, 240px) shrink-wraps the control. Keep itemMinWidth={undefined} and layout="vertical".
6. Connectivity Check one-row grid. Shared CheckerActionRow is grid-template-columns: minmax(4rem, 1fr) minmax(2rem, max-content) plus container-type: inline-size. Bare minmax(0, 1fr) auto lets a long Check translation (Проверить) collapse the select to 0px on the 112px row left at 768px desktop. The two floors still fit that row (4rem + 2rem + 8px). Below 14rem visually hide the Check label (WCAG C7) and keep an icon or the loading spinner; aria-label keeps the full name. Bare 1fr is still minmax(auto, 1fr) (CSS Grid §7.2.3). react-layout-kit Flexbox defaults to a column and must not wrap Check as the only layout. Codex Sign out stays stacked — that card has a paragraph, not a shrinking select.

Map boolean enableResponseApi with getValueFromEvent / getValueProps. Keyboard on the owned toggle follows the WAI-ARIA radio pattern (roving tabindex, arrows move and check).

Do not

• Diagnose “Compatible works, native does not” as different CSS. They share ProviderConfig. Compatible only looked stacked when long labels wrapped.
• Beat LobeHub horizontal rows with stronger flex / width: 100% only.
• Bring back Radio.Group block or Segmented block for the API route.
• Set min-width: 0 only on an inner title Flexbox and ignore .ant-collapse-header-text.
• Treat a first paint of two pills as success. Wait for late CSS-in-JS (~1s / after setFieldsValue) before claiming the toggle is stable.
• Add a second topic branch for another Settings layout pass; stay on the current pre-GA branch.
• Stack Connectivity Check under the model select as the only layout. A naive minmax(0, 1fr) auto row also fails: long Check labels starve the select. Keep one row with floors on both tracks and a compact Check label.

Wrong-direction history (do not revert the working commits)

Codex help icon: do not set trigger={['hover', 'focus']} alone. Installed @rc-component/trigger maps hover to click on touch, so the first tap focuses (open) then clicks (close). Use resolveCodexHelpTrigger: ['click'] when (hover: none) / (pointer: coarse), else ['hover', 'focus']. Cap the popup with min(360px, calc(100vw - 32px)). Meter heading/value and the plan Tag must wrap (flex-wrap, min-width: 0, Tag white-space: normal).

Do not git revert those commits. They also contain the working pieces. Prune only leftover Radio/Segmented markup or dead radio-group CSS.

Sources

• CSS Flexbox min-size:auto
• CSS Grid fr = minmax(auto, <flex>)
• Preventing a Grid Blowout
• MDN minmax()
• MDN container-type
• WCAG C7 visually hidden text
• MDN min-width
• Why flex items don’t shrink past content size
• Ant Design Form
• Radio block (5.21+)
• Segmented block
• Ant Design CSS-in-JS
• antd Collapse header-text flex: auto
• antd #54890
• WAI-ARIA radio group