From bbfb4de321010be28a8628cbe5521389f335fd1d Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 17 Aug 2026 15:29:11 +0000
Subject: [PATCH] refactor(storage): guarantee vertical + full-width mode row
 layout
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 .../Storage/BucketDataProtectionFields.tsx    | 45 ++++++++++---------
 1 file changed, 24 insertions(+), 21 deletions(-)

diff --git a/apps/studio/components/interfaces/Storage/BucketDataProtectionFields.tsx b/apps/studio/components/interfaces/Storage/BucketDataProtectionFields.tsx
index 03a44b0da7f..84aae1fa41d 100644
--- a/apps/studio/components/interfaces/Storage/BucketDataProtectionFields.tsx
+++ b/apps/studio/components/interfaces/Storage/BucketDataProtectionFields.tsx
@@ -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>
 )