From 7b86edfe54c4c1966879e43b85c1375f4ad716f4 Mon Sep 17 00:00:00 2001
From: Francesco Sansalvadore <f.sansalvadore@gmail.com>
Date: Mon, 15 Dec 2025 09:26:54 +0100
Subject: [PATCH] chore(studio): update storage settings forms layout (#41285)

---
 .../Storage/StorageSettings/S3Connection.tsx  | 50 ++++++++++++-------
 .../StorageSettings/StorageSettings.tsx       | 11 ++--
 2 files changed, 37 insertions(+), 24 deletions(-)

diff --git a/apps/studio/components/interfaces/Storage/StorageSettings/S3Connection.tsx b/apps/studio/components/interfaces/Storage/StorageSettings/S3Connection.tsx
index 0630947b9a7..4878a5878bd 100644
--- a/apps/studio/components/interfaces/Storage/StorageSettings/S3Connection.tsx
+++ b/apps/studio/components/interfaces/Storage/StorageSettings/S3Connection.tsx
@@ -29,6 +29,7 @@ import {
   FormControl_Shadcn_,
   FormField_Shadcn_,
   Form_Shadcn_,
+  Separator,
   Switch,
   Table,
   TableBody,
@@ -156,13 +157,13 @@ export const S3Connection = () => {
                   <GenericSkeletonLoader />
                 ) : isProjectActive ? (
                   <Card>
-                    <CardContent className="pt-6">
+                    <CardContent>
                       <FormField_Shadcn_
                         name="s3ConnectionEnabled"
                         control={form.control}
                         render={({ field }) => (
                           <FormItemLayout
-                            layout="horizontal"
+                            layout="flex-row-reverse"
                             className="[&>*>label]:text-foreground"
                             label="S3 protocol connection"
                             description="Allow clients to connect to Supabase Storage via the S3 protocol"
@@ -180,23 +181,34 @@ export const S3Connection = () => {
                       />
                     </CardContent>
 
-                    <CardContent className="py-6">
-                      <div className="flex flex-col gap-y-4">
-                        <FormItemLayout layout="horizontal" label="Endpoint" isReactForm={false}>
-                          <Input readOnly copy value={s3connectionUrl} />
-                        </FormItemLayout>
-                        <FormItemLayout layout="horizontal" label="Region" isReactForm={false}>
-                          <Input
-                            readOnly
-                            copy
-                            value={project?.region}
-                            data-1p-ignore
-                            data-lpignore="true"
-                            data-form-type="other"
-                            data-bwignore
-                          />
-                        </FormItemLayout>
-                      </div>
+                    <CardContent>
+                      <FormItemLayout
+                        layout="flex-row-reverse"
+                        className="[&>div]:md:w-1/2 [&>div>div]:w-full [&>div]:min-w-100"
+                        label="Endpoint"
+                        isReactForm={false}
+                      >
+                        <Input readOnly copy value={s3connectionUrl} />
+                      </FormItemLayout>
+                    </CardContent>
+
+                    <CardContent>
+                      <FormItemLayout
+                        layout="flex-row-reverse"
+                        className="[&>div]:md:w-1/2 [&>div>div]:w-full [&>div]:min-w-100"
+                        label="Region"
+                        isReactForm={false}
+                      >
+                        <Input
+                          readOnly
+                          copy
+                          value={project?.region}
+                          data-1p-ignore
+                          data-lpignore="true"
+                          data-form-type="other"
+                          data-bwignore
+                        />
+                      </FormItemLayout>
                     </CardContent>
 
                     {!isLoadingPermissions && !canUpdateStorageSettings && (
diff --git a/apps/studio/components/interfaces/Storage/StorageSettings/StorageSettings.tsx b/apps/studio/components/interfaces/Storage/StorageSettings/StorageSettings.tsx
index 81b293ff703..47c8a6b1699 100644
--- a/apps/studio/components/interfaces/Storage/StorageSettings/StorageSettings.tsx
+++ b/apps/studio/components/interfaces/Storage/StorageSettings/StorageSettings.tsx
@@ -244,9 +244,9 @@ export const StorageSettings = () => {
                         {isListV2Upgrading && <StorageListV2MigratingCallout />}
                       </>
                     )}
-                    <form id={formId} className="" onSubmit={form.handleSubmit(onSubmit)}>
+                    <form id={formId} onSubmit={form.handleSubmit(onSubmit)}>
                       <Card>
-                        <CardContent className="pt-6">
+                        <CardContent>
                           <FormField_Shadcn_
                             control={form.control}
                             name="imageTransformationEnabled"
@@ -288,6 +288,7 @@ export const StorageSettings = () => {
                                 hideMessage
                                 layout="flex-row-reverse"
                                 label="Global file size limit"
+                                className="[&>div]:md:w-1/2 [&>div]:xl:w-2/5 [&>div>div]:w-full [&>div]:min-w-100"
                                 description={
                                   <>
                                     Restrict the size of files uploaded across all buckets.{' '}
@@ -301,11 +302,11 @@ export const StorageSettings = () => {
                                 }
                               >
                                 <FormControl_Shadcn_>
-                                  <div className="flex items-center gap-2">
+                                  <div className="flex items-center">
                                     <Input_Shadcn_
                                       type="number"
                                       {...field}
-                                      className="w-full"
+                                      className="w-full rounded-r-none border-r-0"
                                       disabled={isFreeTier || !canUpdateStorageSettings}
                                     />
                                     <FormField_Shadcn_
@@ -317,7 +318,7 @@ export const StorageSettings = () => {
                                           onValueChange={unitField.onChange}
                                           disabled={isFreeTier || !canUpdateStorageSettings}
                                         >
-                                          <SelectTrigger_Shadcn_ className="w-[180px]">
+                                          <SelectTrigger_Shadcn_ className="w-[180px] text-xs font-mono rounded-l-none bg-surface-300">
                                             <SelectValue_Shadcn_ placeholder="Choose a prefix">
                                               {storageUnit}
                                             </SelectValue_Shadcn_>