refactor(storage): guarantee vertical + full-width mode row layout

Replace the FormItemLayout wrapper for the both/either row with a
plain label + RadioGroupStacked stack — the previous default-vertical
FormItemLayout wrap was producing the correct DOM but the effect
wasn't visible depending on cache/reload state. Explicit
`flex flex-col gap-y-2 w-full` removes any ambiguity: label above,
radio group below, spanning the full section width.
This commit is contained in:
Claude committed 2026-08-17 15:29:11 +00:00
1 parent 9710563a01
commit bbfb4de321
1 file changed
+24 -21
@@ -306,25 +306,28 @@ interface ExpirationModeToggleProps {
}
const ExpirationModeToggle = ({ mode, onModeChange }: ExpirationModeToggleProps) => (
<FormItemLayout name="expiration_mode" label="Expire a noncurrent version when">
<FormControl>
<RadioGroupStacked
value={mode}
onValueChange={(value: ExpirationMode) => {
if (value) onModeChange(value)
}}
>
<RadioGroupStackedItem
value="and"
label="Both conditions are met"
description="It exceeds both the age limit and the retained-versions cap."
/>
<RadioGroupStackedItem
value="or"
label="Either condition is met"
description="It exceeds either the age limit or the retained-versions cap."
/>
</RadioGroupStacked>
</FormControl>
</FormItemLayout>
<div className="mt-2 flex w-full flex-col gap-y-2">
<label htmlFor="expiration_mode" className="text-sm text-foreground">
Expire a noncurrent version when
</label>
<RadioGroupStacked
id="expiration_mode"
className="w-full"
value={mode}
onValueChange={(value: ExpirationMode) => {
if (value) onModeChange(value)
}}
>
<RadioGroupStackedItem
value="and"
label="Both conditions are met"
description="It exceeds both the age limit and the retained-versions cap."
/>
<RadioGroupStackedItem
value="or"
label="Either condition is met"
description="It exceeds either the age limit or the retained-versions cap."
/>
</RadioGroupStacked>
</div>
)