fix responsive issues (supabase#40029)

SaxonF · web-flow · commit d66307f98b6a · 2025-10-31T19:25:41.000+10:00
* fix responsive issues

* sidebar width
diff --git a/apps/studio/components/interfaces/Auth/Policies/PolicyTableRow/PolicyTableRowHeader.tsx b/apps/studio/components/interfaces/Auth/Policies/PolicyTableRow/PolicyTableRowHeader.tsx
@@ -44,15 +44,19 @@ export const PolicyTableRowHeader = ({
 
   return (
     <div id={table.id.toString()} className="flex w-full items-center justify-between">
-      <div className="flex gap-x-4 text-left">
+      <div className="flex gap-x-4 text-left flex-wrap">
         <EditorTablePageLink
           projectRef={ref}
           id={String(table.id)}
-          className="flex items-center gap-x-3"
+          className="flex items-center gap-3 flex-wrap"
         >
           <Table strokeWidth={1.5} size={16} className="text-foreground-muted" />
           <CardTitle className="m-0 normal-case">{table.name}</CardTitle>
-          {!table.rls_enabled && <Badge variant="warning">RLS Disabled</Badge>}
+          {!table.rls_enabled && (
+            <Badge variant="warning" className="shrink-0">
+              RLS Disabled
+            </Badge>
+          )}
         </EditorTablePageLink>
         {isTableLocked && (
           <Badge>
diff --git a/apps/studio/components/interfaces/Database/EnumeratedTypes/EnumeratedTypes.tsx b/apps/studio/components/interfaces/Database/EnumeratedTypes/EnumeratedTypes.tsx
@@ -56,8 +56,8 @@ export const EnumeratedTypes = () => {
 
   return (
     <div className="space-y-4">
-      <div className="flex flex-col lg:flex-row lg:items-center justify-between gap-2">
-        <div className="flex flex-col lg:flex-row lg:items-center gap-2">
+      <div className="flex flex-col lg:flex-row lg:items-center justify-between gap-2 flex-wrap">
+        <div className="flex flex-col lg:flex-row lg:items-center gap-2 flex-wrap">
           <SchemaSelector
             className="w-full lg:w-[180px]"
             size="tiny"
diff --git a/apps/studio/components/interfaces/Database/Triggers/TriggersList/TriggersList.tsx b/apps/studio/components/interfaces/Database/Triggers/TriggersList/TriggersList.tsx
@@ -97,7 +97,7 @@ const TriggersList = ({
   return (
     <div className="space-y-4">
       <div className="flex flex-col lg:flex-row lg:items-center justify-between gap-2 flex-wrap">
-        <div className="flex flex-col lg:flex-row lg:items-center gap-2">
+        <div className="flex flex-col lg:flex-row lg:items-center gap-2 flex-wrap">
           <SchemaSelector
             className="w-full lg:w-[180px]"
             size="tiny"
diff --git a/apps/studio/components/interfaces/Home/AdvisorWidget.tsx b/apps/studio/components/interfaces/Home/AdvisorWidget.tsx
@@ -187,13 +187,13 @@ export const AdvisorWidget = () => {
   }
 
   return (
-    <div>
+    <div className="@container">
       {isLoadingLints ? (
         <ShimmeringLoader className="w-96 mb-6" />
       ) : (
         <div className="flex justify-between items-center mb-6">{titleContent}</div>
       )}
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+      <div className="grid grid-cols-1 @xl:grid-cols-2 gap-4">
         <Card className="h-80">
           <Tabs value={selectedTab} className="h-full flex flex-col">
             <CardHeader className="h-10 py-0 pl-4 pr-2 flex flex-row items-center justify-between flex-0">
diff --git a/apps/studio/components/interfaces/Home/Home.tsx b/apps/studio/components/interfaces/Home/Home.tsx
@@ -213,7 +213,7 @@ export const Home = () => {
 
       <>
         <div className="py-16 border-b border-muted">
-          <div className="mx-auto max-w-7xl space-y-16">
+          <div className="mx-auto max-w-7xl space-y-16 @container">
             {IS_PLATFORM && project?.status !== PROJECT_STATUS.INACTIVE && (
               <>{isNewProject ? <NewProjectPanel /> : <ProjectUsageSection />}</>
             )}
@@ -222,7 +222,7 @@ export const Home = () => {
         </div>
 
         <div className="bg-surface-100/5 py-16">
-          <div className="mx-auto max-w-7xl space-y-16">
+          <div className="mx-auto max-w-7xl space-y-16 @container">
             {project?.status !== PROJECT_STATUS.INACTIVE && (
               <>
                 <div className="space-y-8">
diff --git a/apps/studio/components/interfaces/Home/ProjectUsage.tsx b/apps/studio/components/interfaces/Home/ProjectUsage.tsx
@@ -195,8 +195,8 @@ const ProjectUsage = () => {
           Statistics for {selectedInterval.label.toLowerCase()}
         </span>
       </div>
-      <div className="grid grid-cols-1 md:grid-cols-2 md:gap-4 lg:grid-cols-4">
-        <Panel className="mb-0 md:mb-0">
+      <div className="grid grid-cols-1 @md:grid-cols-2 gap-4 @2xl:grid-cols-4">
+        <Panel className="mb-0">
           <Panel.Content className="space-y-4">
             <PanelHeader
               icon={
diff --git a/apps/studio/components/interfaces/HomeNew/ActivityStats.tsx b/apps/studio/components/interfaces/HomeNew/ActivityStats.tsx
@@ -55,7 +55,7 @@ export const ActivityStats = () => {
 
   return (
     <div className="@container">
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-2 lg:gap-6 flex-wrap">
+      <div className="grid grid-cols-1 @md:grid-cols-2 gap-2 @md:gap-6 flex-wrap">
         <ServiceStatus />
 
         <SingleStat
diff --git a/apps/studio/components/interfaces/HomeNew/GettingStarted/GettingStarted.tsx b/apps/studio/components/interfaces/HomeNew/GettingStarted/GettingStarted.tsx
@@ -77,9 +77,9 @@ export function GettingStarted({ steps, onStepClick }: GettingStartedProps) {
   }
 
   return (
-    <Card className="overflow-hidden">
-      <div className="flex flex-col lg:flex-row">
-        <aside className="hidden border-r lg:block lg:w-[calc(1/3*100%-16px)]">
+    <Card className="overflow-hidden @container">
+      <div className="flex flex-col @2xl:flex-row">
+        <aside className="hidden border-r @2xl:block @2xl:w-[calc(1/3*100%-16px)]">
           <ol>
             {steps.map((step, index) => {
               const isActive = step.key === activeStep.key
@@ -130,7 +130,7 @@ export function GettingStarted({ steps, onStepClick }: GettingStartedProps) {
         </aside>
 
         <CardContent className="flex flex-1 flex-col gap-0 p-0 overflow-y-auto border-b-0">
-          <div className="flex items-center justify-between gap-2 border-b px-2 py-2 lg:hidden">
+          <div className="flex items-center justify-between gap-2 border-b px-2 py-2 @2xl:hidden">
             <span className="text-xs shrink-0 font-mono text-foreground-light w-7 h-7 bg border flex items-center justify-center rounded-md">
               {activeStepIndex + 1}
             </span>
@@ -186,7 +186,7 @@ export function GettingStarted({ steps, onStepClick }: GettingStartedProps) {
               <h3>{activeStep.title}</h3>
               <Badge
                 variant={activeStep.status === 'complete' ? 'success' : 'default'}
-                className="capitalize hidden lg:inline-flex"
+                className="capitalize hidden @2xl:inline-flex"
               >
                 {activeStep.status}
               </Badge>
diff --git a/apps/studio/components/interfaces/Settings/General/General.tsx b/apps/studio/components/interfaces/Settings/General/General.tsx
@@ -140,7 +140,7 @@ export const General = () => {
           <div className="mt-6" id="restart-project">
             <FormPanel>
               <div className="flex flex-col px-8 py-4">
-                <div className="flex justify-between items-center">
+                <div className="flex flex-col @lg:flex-row @lg:justify-between @lg:items-center gap-4">
                   <div>
                     <p className="text-sm">
                       {projectSettingsRestartProject ? 'Restart project' : 'Restart database'}
@@ -155,7 +155,7 @@ export const General = () => {
                 </div>
               </div>
               <div
-                className="flex w-full items-center justify-between px-8 py-4"
+                className="flex w-full flex-col @lg:flex-row @lg:justify-between @lg:items-center gap-4 px-8 py-4"
                 id="pause-project"
               >
                 <div>
@@ -173,7 +173,7 @@ export const General = () => {
           <div className="mt-6">
             <Panel>
               <Panel.Content>
-                <div className="flex justify-between">
+                <div className="flex flex-col @lg:flex-row @lg:justify-between @lg:items-center gap-4">
                   <div className="flex space-x-4">
                     <BarChart2 strokeWidth={2} />
                     <div>
diff --git a/apps/studio/components/interfaces/Settings/General/TransferProjectPanel/TransferProjectPanel.tsx b/apps/studio/components/interfaces/Settings/General/TransferProjectPanel/TransferProjectPanel.tsx
@@ -18,7 +18,7 @@ export const TransferProjectPanel = () => {
       />
       <Panel>
         <Panel.Content>
-          <div className="flex justify-between items-center gap-8">
+          <div className="flex flex-col @lg:flex-row @lg:justify-between @lg:items-center gap-4">
             <div className="flex space-x-4">
               <Truck className="mt-1" />
               <div className="space-y-1 xl:max-w-lg">
diff --git a/apps/studio/components/layouts/Scaffold.tsx b/apps/studio/components/layouts/Scaffold.tsx
@@ -93,7 +93,7 @@ export const ScaffoldSection = forwardRef<
       {...props}
       className={cn(
         'flex flex-col first:pt-12 py-6',
-        isFullWidth ? 'w-full' : 'gap-3 lg:grid md:grid-cols-12',
+        isFullWidth ? 'w-full' : 'gap-3 @lg:grid @md:grid-cols-12',
         className
       )}
     />
diff --git a/apps/studio/components/ui/Forms/FormSection.tsx b/apps/studio/components/ui/Forms/FormSection.tsx
@@ -78,7 +78,7 @@ export const FormSectionContent = ({
   return (
     <div
       className={`
-        relative col-span-12 flex flex-col gap-6 lg:col-span-7
+        relative col-span-12 flex flex-col gap-6 @lg:col-span-7
         ${fullWidth && '!col-span-12'}
         ${className}
       `}
diff --git a/apps/studio/components/ui/UpgradeToPro.tsx b/apps/studio/components/ui/UpgradeToPro.tsx
@@ -49,7 +49,7 @@ const UpgradeToPro = ({
     >
       <div className="flex gap-x-3">
         {icon && <div className="mt-1">{icon}</div>}
-        <div className="flex flex-col md:flex-row w-full md:items-center justify-between gap-4 md:gap-x-8">
+        <div className="flex flex-col @md:flex-row w-full @md:items-center justify-between gap-4 @md:gap-x-8">
           <div className="space-y-1 flex-1 max-w-2xl">
             <p className="text-sm">{primaryText}</p>
             <div>
diff --git a/packages/ui-patterns/src/form/Layout/FormLayout.tsx b/packages/ui-patterns/src/form/Layout/FormLayout.tsx
@@ -42,11 +42,11 @@ const ContainerVariants = cva('relative grid gap-10', {
       false: '',
     },
     layout: {
-      horizontal: 'flex flex-col gap-2 md:grid md:grid-cols-12',
+      horizontal: 'flex flex-col gap-2 md:grid @lg:grid-cols-12',
       vertical: 'flex flex-col gap-2',
       flex: 'flex flex-row gap-3',
       'flex-row-reverse':
-        'flex flex-col-reverse gap-2 md:gap-6 md:flex-row-reverse md:justify-between',
+        'flex flex-col-reverse gap-2 @lg:gap-6 @lg:flex-row-reverse @lg:justify-between',
     },
     flex: {
       true: '',
@@ -233,7 +233,7 @@ const FlexContainer = cva('', {
     },
     {
       layout: 'flex-row-reverse',
-      className: 'flex flex-col justify-center items-start md:items-end shrink-0',
+      className: 'flex flex-col justify-center items-start @lg:items-end shrink-0',
     },
   ],
 })
@@ -359,83 +359,85 @@ export const FormLayout = React.forwardRef<
     )
 
     return (
-      <div
-        ref={ref}
-        {...props}
-        className={cn(ContainerVariants({ size, flex, align, layout }), className)}
-      >
-        {flex && (
-          <div className={cn(FlexContainer({ flex, align, layout }))}>
-            {props.children}
-            {layout === 'flex-row-reverse' && renderError}
-          </div>
-        )}
-        {hasLabel || labelOptional || layout === 'horizontal' ? (
-          <>
-            <div
-              className={cn(LabelContainerVariants({ align, labelLayout, flex, layout }))}
-              data-formlayout-id={'labelContainer'}
-            >
-              {hasLabel && isReactForm ? (
-                <FormLabel_Shadcn_
-                  className="text-foreground flex gap-2 items-center break-all"
-                  data-formlayout-id="formLabel"
-                  htmlFor={props.name || id}
-                >
-                  <LabelContents />
-                </FormLabel_Shadcn_>
-              ) : (
-                <Label_Shadcn_
-                  className="text-foreground flex gap-2 items-center break-all leading-normal"
-                  data-formlayout-id="label"
-                  htmlFor={props.name || id}
-                >
-                  <LabelContents />
-                </Label_Shadcn_>
-              )}
-              {labelOptional && (
-                <span
-                  className={cn(LabelOptionalVariants({ size }))}
-                  id={id + '-optional'}
-                  data-formlayout-id={'labelOptional'}
-                >
-                  {labelOptional}
-                </span>
-              )}
-              {flex && (
-                <>
-                  {renderDescription}
-                  {layout !== 'flex-row-reverse' && renderError}
-                </>
-              )}
+      <div className="@container">
+        <div
+          ref={ref}
+          {...props}
+          className={cn(ContainerVariants({ size, flex, align, layout }), className)}
+        >
+          {flex && (
+            <div className={cn(FlexContainer({ flex, align, layout }))}>
+              {props.children}
+              {layout === 'flex-row-reverse' && renderError}
             </div>
-          </>
-        ) : null}
-        {!flex && (
-          <div
-            className={cn(DataContainerVariants({ align, layout }))}
-            style={style}
-            data-formlayout-id={'dataContainer'}
-          >
+          )}
+          {hasLabel || labelOptional || layout === 'horizontal' ? (
             <>
               <div
-                className={cn(
-                  NonBoxInputContainer({
-                    nonBoxInput,
-                    // @ts-expect-error
-                    label,
-                    layout,
-                  })
-                )}
-                data-formlayout-id={'nonBoxInputContainer'}
+                className={cn(LabelContainerVariants({ align, labelLayout, flex, layout }))}
+                data-formlayout-id={'labelContainer'}
               >
-                {props.children}
+                {hasLabel && isReactForm ? (
+                  <FormLabel_Shadcn_
+                    className="text-foreground flex gap-2 items-center break-all"
+                    data-formlayout-id="formLabel"
+                    htmlFor={props.name || id}
+                  >
+                    <LabelContents />
+                  </FormLabel_Shadcn_>
+                ) : (
+                  <Label_Shadcn_
+                    className="text-foreground flex gap-2 items-center break-all leading-normal"
+                    data-formlayout-id="label"
+                    htmlFor={props.name || id}
+                  >
+                    <LabelContents />
+                  </Label_Shadcn_>
+                )}
+                {labelOptional && (
+                  <span
+                    className={cn(LabelOptionalVariants({ size }))}
+                    id={id + '-optional'}
+                    data-formlayout-id={'labelOptional'}
+                  >
+                    {labelOptional}
+                  </span>
+                )}
+                {flex && (
+                  <>
+                    {renderDescription}
+                    {layout !== 'flex-row-reverse' && renderError}
+                  </>
+                )}
               </div>
-              {renderError}
-              {renderDescription}
             </>
-          </div>
-        )}
+          ) : null}
+          {!flex && (
+            <div
+              className={cn(DataContainerVariants({ align, layout }))}
+              style={style}
+              data-formlayout-id={'dataContainer'}
+            >
+              <>
+                <div
+                  className={cn(
+                    NonBoxInputContainer({
+                      nonBoxInput,
+                      // @ts-expect-error
+                      label,
+                      layout,
+                    })
+                  )}
+                  data-formlayout-id={'nonBoxInputContainer'}
+                >
+                  {props.children}
+                </div>
+                {renderError}
+                {renderDescription}
+              </>
+            </div>
+          )}
+        </div>
       </div>
     )
   }
