fix(sdl): break controls earlier so columns don't overlap

refs #828
akash-network · Feb 12, 2025 · c9d3b45 · c9d3b45
1 parent 626b482
commit c9d3b45
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 6 deletions.
diff --git a/apps/deploy-web/src/components/sdl/MemoryFormControl.tsx b/apps/deploy-web/src/components/sdl/MemoryFormControl.tsx
@@ -36,7 +36,7 @@ export const MemoryFormControl: React.FunctionComponent<Props> = ({ control, ser
       render={({ field, fieldState }) => (
         <FormPaper>
           <FormItem>
-            <div className="flex flex-col items-start sm:flex-row sm:items-center">
+            <div className="flex flex-col items-start lg:flex-row lg:items-center">
               <div className="flex items-center">
                 <MdMemory className="mr-2 text-2xl text-muted-foreground" />
                 <strong className="text-sm">Memory</strong>
@@ -58,7 +58,7 @@ export const MemoryFormControl: React.FunctionComponent<Props> = ({ control, ser
                 </CustomTooltip>
               </div>
 
-              <div className="mt-2 flex items-center sm:ml-4 sm:mt-0">
+              <div className="mt-2 flex items-center lg:ml-4 lg:mt-0">
                 <Input
                   type="number"
                   error={!!fieldState.error}

diff --git a/apps/deploy-web/src/components/sdl/PersistentStorage.tsx b/apps/deploy-web/src/components/sdl/PersistentStorage.tsx
@@ -42,7 +42,7 @@ export const PersistentStorage: React.FunctionComponent<Props> = ({ currentServi
         name={`services.${serviceIndex}.profile.persistentStorage`}
         render={({ field, fieldState }) => (
           <FormItem>
-            <div className="flex flex-col items-start sm:flex-row sm:items-center">
+            <div className="flex flex-col items-start lg:flex-row lg:items-center">
               <div className="flex items-center">
                 <div className="flex items-center">
                   <MdStorage className="mr-2 text-2xl text-muted-foreground" />
@@ -75,7 +75,7 @@ export const PersistentStorage: React.FunctionComponent<Props> = ({ currentServi
               </div>
 
               {currentService.profile.hasPersistentStorage && (
-                <div className="mt-2 flex items-center sm:ml-4 sm:mt-0">
+                <div className="mt-2 flex items-center lg:ml-4 lg:mt-0">
                   <Input
                     type="number"
                     color="secondary"

diff --git a/apps/deploy-web/src/components/sdl/StorageFormControl.tsx b/apps/deploy-web/src/components/sdl/StorageFormControl.tsx
@@ -36,7 +36,7 @@ export const StorageFormControl: React.FunctionComponent<Props> = ({ control, se
       render={({ field, fieldState }) => (
         <FormPaper>
           <FormItem>
-            <div className="flex flex-col items-start sm:flex-row sm:items-center">
+            <div className="flex flex-col items-start lg:flex-row lg:items-center">
               <div className="flex items-center">
                 <MdStorage className="mr-2 text-2xl text-muted-foreground" />
                 <strong className="text-sm">Ephemeral Storage</strong>
@@ -61,7 +61,7 @@ export const StorageFormControl: React.FunctionComponent<Props> = ({ control, se
                 </CustomTooltip>
               </div>
 
-              <div className="mt-2 flex items-center sm:ml-4 sm:mt-0">
+              <div className="mt-2 flex items-center lg:ml-4 lg:mt-0">
                 <Input
                   type="number"
                   color="secondary"