chore(studio): update storage settings forms layout (#41285)

This commit is contained in:
Francesco Sansalvadore authored and GitHub committed 2025-12-15 09:26:54 +01:00
1 parent 3b7a7e4455
commit 7b86edfe54
2 files changed
+37 -24

No files matched your search

@@ -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 && (
@@ -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_>