Еще немного стиля

app/assets/mui/themes/home.ts

@@ -95,7 +95,12 @@ const customTheme = (outerTheme: Theme) =>
                         backgroundColor: '#282c34',
                         color: 'var(--TextField-brandBorderColor)',
                         width: '90%',
-                        maxWidth: '90%!important'
+                        maxWidth: '90%!important',
+                        '@media (width <= 570px)': {
+                            maxWidth: '95%!important',
+                            width: '95%',
+                            margin: '5px'
+                        },
                     }
                 }
             },

app/assets/styles/home.css

@@ -71,6 +71,32 @@
     margin-top: 10px;
 }
 
+.report-comment:hover {
+    background-color: #383d49;
+    cursor: default;
+}
+
+.report-nickname:hover {
+    background-color: #383d49;
+    cursor: default;
+}
+
+.report-content-header {
+    font-weight: bold;
+}
+
+.report-title-header {
+    display: flex;
+    justify-content: space-between;
+}
+
+.report-dialog-actions {
+    width: 100%;
+    display: flex;
+    justify-content: space-around
+}
+
+
 @media (width <= 570px) {
 
     .report-tag-list {
@@ -93,23 +119,14 @@
             color: var(--tag-color-very-bad);
         }
     }
+
+    .dialog-window {
+        max-width: 95%;
+        width: 95%;
+        margin: 5px;
     }
 
-.report-comment:hover {
-    background-color: #383d49;
-    cursor: default;
+    .report-dialog-actions {
+        margin-top: 15px;
     }
-
-.report-nickname:hover {
-    background-color: #383d49;
-    cursor: default;
-}
-
-.report-content-header {
-    font-weight: bold;
-}
-
-.report-title-header {
-    display: flex;
-    justify-content: space-between;
 }

app/components/reportDialog.tsx

@@ -145,7 +145,7 @@ export default function ReportDialog({ open, handleClose }: { open: boolean, han
                             label="Smurf"
                         />
                     </div>
-                    <div style={{width: '100%', display: 'flex', justifyContent: 'space-around'}}>
+                    <div className="report-dialog-actions" style={{}}>
                         <Button loading={loading} onClick={() => handleSend()} variant="contained">Send</Button>
                         <Button onClick={() => handleClose()} variant="outlined">Cancel</Button>
                     </div>