mirror of
https://github.com/supabase/supabase.git
synced 2026-10-08 19:05:06 +03:00
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:
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>
|
||||
)
|
||||
Reference in new issue
Block a user