3# Достилизовал компоненты чтобы не было горизонтального скролла и интерфейс был адаптивным

frontend/src/app/components/InputField.tsx

@@ -17,25 +17,33 @@ export default function InputField({ name, value, onChange }: Props) {
       labelText = `Encoded message`;
       break;
     case "Password":
-      labelText = name;
+      labelText = "";
       break;
     default:
       break;
   }
 
   return (
-    <Grid2 container alignItems="center" paddingY={2}>
-      <Grid2 size={name === "Password" ? 8 : 4}>
+    <Grid2 container alignItems="center" paddingY={2} spacing={2}>
+      <Grid2 flexGrow={1}>
         <Typography
           component="label"
           htmlFor={`${name}-input`}
-          sx={{ fontSize: 20, display: "block" }}
+          sx={{
+            fontSize: {
+              xs: "16px",
+              sm: "20px",
+            },
+          }}
         >
           {labelText}
         </Typography>
       </Grid2>
 
-      <Grid2 size={name === "Password" ? 4 : 8}>
+      <Grid2
+        size={name === "Password" ? 6 : 8}
+        sx={{ "@media (max-width: 900px)": { width: "100%" } }}
+      >
         <TextField
           fullWidth
           multiline={name !== "Password"}

frontend/src/app/page.tsx

@@ -32,8 +32,25 @@ export default function Home() {
   return (
     <div className="App">
       <Container sx={{ marginTop: 2 }} maxWidth="lg">
-        <Typography variant="h3">Cypher Coder/Decoder</Typography>
+        <Typography
+          variant="h3"
+          sx={{
+            fontSize: {
+              xs: "24px",
+              sm: "36px",
+            },
+          }}
+        >
+          Cypher Coder/Decoder
+        </Typography>
         <Box
+          sx={{
+            maxWidth: {
+              xs: "90%",
+              sm: "80%",
+              lg: "70%",
+            },
+          }}
           component="form"
           autoComplete="off"
           onSubmit={submitFormHandler}
@@ -45,7 +62,16 @@ export default function Home() {
               value={formData.decoded}
               onChange={onInputChangeHandler}
             />
-            <Grid2 container alignItems="center" justifyContent="space-between">
+            <Grid2
+              container
+              alignItems="center"
+              sx={{
+                flexDirection: {
+                  xs: "column",
+                  md: "row",
+                },
+              }}
+            >
               <Grid2 size={7}>
                 <InputField
                   name="Password"
@@ -53,20 +79,40 @@ export default function Home() {
                   onChange={onInputChangeHandler}
                 />
               </Grid2>
-              <Grid2 size={2} justifyContent="center">
-                <Button variant="contained" startIcon={<ArrowDownwardIcon />}>
-                  Encode
-                </Button>
-              </Grid2>
-              <Grid2 size={2} justifyContent="center">
-                <Button
-                  variant="contained"
-                  startIcon={
-                    <ArrowDownwardIcon sx={{ transform: "rotate(180deg)" }} />
-                  }
-                >
-                  Decode
-                </Button>
+              <Grid2 container justifyContent={{}}>
+                <Grid2>
+                  <Button
+                    size="small"
+                    variant="contained"
+                    startIcon={<ArrowDownwardIcon />}
+                  >
+                    <Typography
+                      sx={{
+                        display: { xs: "none", md: "inline" },
+                      }}
+                    >
+                      Encode
+                    </Typography>
+                  </Button>
+                </Grid2>
+
+                <Grid2>
+                  <Button
+                    size="small"
+                    variant="contained"
+                    startIcon={
+                      <ArrowDownwardIcon sx={{ transform: "rotate(180deg)" }} />
+                    }
+                  >
+                    <Typography
+                      sx={{
+                        display: { xs: "none", md: "inline" },
+                      }}
+                    >
+                      Decode
+                    </Typography>
+                  </Button>
+                </Grid2>
               </Grid2>
             </Grid2>