fix: initial grid improvements

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

@@ -7,56 +7,98 @@ 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>
-      <TextField label="Service name" name="serviceName" required={true} />
+      <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} />
-      <TextField label="Command" name="command" required={false} />
-      <TextField label="Entrypoint" name="entrypoint" required={false} />
-      <TextField label="Env file" name="envFile" required={false} />
-      <TextField label="Working directory" name="workingDir" required={false} />
+      <Group>
+        <TextField
+          label="Container name"
+          name="containerName"
+          required={false}
+        />
+      </Group>
 
-      <Toggle
-        name="restart"
-        label="Restart policy"
-        options={[
-          {
-            value: "no",
-            text: "no"
-          },
-          {
-            value: "always",
-            text: "always"
-          },
-          {
-            value: "on-failure",
-            text: "on-failure"
-          },
-          {
-            value: "unless-stopped",
-            text: "unless-stopped"
-          }
-        ]}
-      />
+      <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} />
+      </Group>
+
+      <Group>
+        <SpanTwo>
+          <TextField
+            label="Working directory"
+            name="workingDir"
+            required={false}
+          />
+        </SpanTwo>
+      </Group>
+
+      <Group>
+        <SpanTwo>
+          <Toggle
+            name="restart"
+            label="Restart policy"
+            options={[
+              {
+                value: "no",
+                text: "no"
+              },
+              {
+                value: "always",
+                text: "always"
+              },
+              {
+                value: "on-failure",
+                text: "on-failure"
+              },
+              {
+                value: "unless-stopped",
+                text: "unless-stopped"
+              }
+            ]}
+          />
+        </SpanTwo>
+      </Group>
 
       <Records
         name="ports"

services/frontend/src/components/Record.tsx

@@ -118,14 +118,16 @@ const Record: FunctionComponent<IRecordProps> = (
         ))
       )}
       {renderRemoveWrapper(
-        <RemoveButton
-          variant="soft"
-          size="sm"
-          color="danger"
-          onClick={handleRemove}
-        >
-          <MinusSmIcon className="h-5 w-5" />
-        </RemoveButton>
+        <div className="flex justify-end content-end">
+          <RemoveButton
+            variant="soft"
+            size="sm"
+            color="danger"
+            onClick={handleRemove}
+          >
+            <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,28 +21,30 @@ const TextField: FunctionComponent<ITextFieldProps> = (
 
   return (
     <Root>
-      {label && (
-        <label htmlFor={name} className="lbl-util">
-          {label + (required ? "*" : "")}
-        </label>
-      )}
+      <div>
+        {label && (
+          <label htmlFor={name} className="lbl-util">
+            {label + (required ? "*" : "")}
+          </label>
+        )}
 
-      <input
-        id={name}
-        name={name}
-        type="text"
-        autoComplete="off"
-        className="input-util"
-        required={required}
-        onBlur={formik.handleBlur}
-        onChange={formik.handleChange}
-        value={lodash.get(formik.values, name)}
-        {...otherProps}
-      />
+        <input
+          id={name}
+          name={name}
+          type="text"
+          autoComplete="off"
+          className="input-util mb-2 sm:mb-0"
+          required={required}
+          onBlur={formik.handleBlur}
+          onChange={formik.handleChange}
+          value={lodash.get(formik.values, name)}
+          {...otherProps}
+        />
 
-      <div className="mt-1 text-xs text-red-600">
-        {error && <span className="caption">{error}</span>}
-        {!error && help}
+        <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")`