fix: initial grid improvements

services/frontend/src/components/Modal/service/General.tsx

@@ -7,34 +7,74 @@ const Root = styled("div")`
   display: flex;
   flex-direction: column;
   row-gap: ${({ theme }) => theme.spacing(1)};
+  @media (max-width: 640px) {
+    row-gap: 0;
+  }
 `;
 
 const Group = styled("div")`
-  display: flex;
-  flex-direction: row;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-column-gap: 0px;
+  grid-row-gap: 0px;
   @media (max-width: 640px) {
-    flex-direction: column;
+    grid-template-columns: repeat(1, 1fr);
   }
   column-gap: ${({ theme }) => theme.spacing(1)};
   width: 100%;
 `;
 
+const SpanTwo = styled("div")`
+  grid-column: span 2;
+  @media (max-width: 640px) {
+    grid-column: span 3;
+  }
+`;
+
 const General = () => {
   return (
     <Root>
+      <Group>
         <TextField label="Service name" name="serviceName" required={true} />
+      </Group>
 
       <Group>
         <TextField label="Image name" name="imageName" required={false} />
         <TextField label="Image tag" name="imageTag" />
       </Group>
 
-      <TextField label="Container name" name="containerName" required={false} />
+      <Group>
+        <TextField
+          label="Container name"
+          name="containerName"
+          required={false}
+        />
+      </Group>
+
+      <Group>
         <TextField label="Command" name="command" required={false} />
+      </Group>
+
+      <Group>
         <TextField label="Entrypoint" name="entrypoint" required={false} />
+      </Group>
+
+      <Group>
         <TextField label="Env file" name="envFile" required={false} />
-      <TextField label="Working directory" name="workingDir" required={false} />
+      </Group>
 
+      <Group>
+        <SpanTwo>
+          <TextField
+            label="Working directory"
+            name="workingDir"
+            required={false}
+          />
+        </SpanTwo>
+      </Group>
+
+      <Group>
+        <SpanTwo>
           <Toggle
             name="restart"
             label="Restart policy"
@@ -57,6 +97,8 @@ const General = () => {
               }
             ]}
           />
+        </SpanTwo>
+      </Group>
 
       <Records
         name="ports"

services/frontend/src/components/Record.tsx

@@ -118,6 +118,7 @@ const Record: FunctionComponent<IRecordProps> = (
         ))
       )}
       {renderRemoveWrapper(
+        <div className="flex justify-end content-end">
           <RemoveButton
             variant="soft"
             size="sm"
@@ -126,6 +127,7 @@ const Record: FunctionComponent<IRecordProps> = (
           >
             <MinusSmIcon className="h-5 w-5" />
           </RemoveButton>
+        </div>
       )}
     </Root>
   );

services/frontend/src/components/Records.tsx

@@ -37,6 +37,9 @@ const Group = styled("div", {
   align-items: ${({ empty }) => (empty ? "center" : "flex-end")};
   row-gap: ${({ theme }) => theme.spacing(1)};
   width: 100%;
+  @media (max-width: 640px) {
+    row-gap: 0;
+  }
 `;
 
 const GroupTitle = styled("h5")`
@@ -58,7 +61,6 @@ const RecordList = styled("div")`
 `;
 
 const AddButton = styled(IconButton)`
-  margin-top: ${({ theme }) => theme.spacing(1)};
   border-radius: ${({ theme }) => theme.spacing(2)};
 `;
 

services/frontend/src/components/global/FormElements/TextField.tsx

@@ -9,11 +9,7 @@ export interface ITextFieldProps {
   [key: string]: any;
 }
 
-const Root = styled("div")`
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-`;
+const Root = styled("div")``;
 
 const TextField: FunctionComponent<ITextFieldProps> = (
   props: ITextFieldProps
@@ -25,6 +21,7 @@ const TextField: FunctionComponent<ITextFieldProps> = (
 
   return (
     <Root>
+      <div>
         {label && (
           <label htmlFor={name} className="lbl-util">
             {label + (required ? "*" : "")}
@@ -36,7 +33,7 @@ const TextField: FunctionComponent<ITextFieldProps> = (
           name={name}
           type="text"
           autoComplete="off"
-        className="input-util"
+          className="input-util mb-2 sm:mb-0"
           required={required}
           onBlur={formik.handleBlur}
           onChange={formik.handleChange}
@@ -44,10 +41,11 @@ const TextField: FunctionComponent<ITextFieldProps> = (
           {...otherProps}
         />
 
-      <div className="mt-1 text-xs text-red-600">
+        <div className="text-xs text-red-600">
           {error && <span className="caption">{error}</span>}
           {!error && help}
         </div>
+      </div>
     </Root>
   );
 };

services/frontend/src/components/global/FormElements/Toggle.tsx

@@ -1,6 +1,6 @@
 import lodash from "lodash";
 import { useFormikContext } from "formik";
-import { Fragment, FunctionComponent, ReactElement, useCallback } from "react";
+import { Fragment, FunctionComponent, ReactElement } from "react";
 import { Button, styled } from "@mui/joy";
 
 export interface IToggleProps {
@@ -25,16 +25,21 @@ const Root = styled("div")`
 `;
 
 const Label = styled("label")`
+  margin-bottom: 0.25rem;
+  display: block;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  font-weight: 700;
   color: #374151;
-  font-size: 12px;
-  font-weight: 500;
   padding: 0;
-  margin: 0;
 `;
 
 const Buttons = styled("div")`
   display: flex;
   flex-direction: row;
+  @media (max-width: 640px) {
+    margin-bottom: 0.5rem;
+  }
 `;
 
 const ToggleButton = styled(Button)<IToggleButtonProps>(({ index, total }) => ({
@@ -44,8 +49,7 @@ const ToggleButton = styled(Button)<IToggleButtonProps>(({ index, total }) => ({
       ${index === total - 1 ? "8px" : "0px"}
       ${index === 0 ? "8px" : "0px"}
     `,
-  fontSize: 11,
-  minWidth: 120
+  fontSize: 11
 }));
 
 const ButtonBorder = styled("div")`