WEB APP: Стили в примерах для разработчика (MUI)

app/panels/samples/mui.js

@@ -22,7 +22,10 @@ import { ApplicationСtx } from "../../context/application"; //Контекст
 const STYLES = {
     CONTAINER: { textAlign: "center", paddingTop: "20px" },
     TITLE: { paddingBottom: "15px" },
-    LIST: { width: "100%", maxWidth: "600px", bgcolor: "background.paper" }
+    GRID_CONTAINER: { maxWidth: "500px" },
+    GRID_TEM: { width: "100%" },
+    LIST_CONTAINER: { marginTop: "10pt", maxHeight: "60vh", overflow: "auto", width: "100%" },
+    LIST: { width: "100%", bgcolor: "background.paper" }
 };
 
 //-----------
@@ -109,8 +112,9 @@ const Mui = ({ title }) => {
             <Typography sx={STYLES.TITLE} variant={"h6"}>
                 {title}
             </Typography>
-            <Grid container spacing={0} direction="column" alignItems="center">
+            <Box display="flex" justifyContent="center" alignItems="center">
-                <Grid item xs={12}>
+                <Grid container spacing={0} direction="column" alignItems="center" justifyContent="center" sx={STYLES.GRID_CONTAINER}>
+                    <Grid item xs={12} sx={STYLES.GRID_TEM}>
                         <TextField
                             name="agnAbbr"
                             label="Мнемокод"
@@ -132,6 +136,9 @@ const Mui = ({ title }) => {
                                 Добавить контрагента
                             </Button>
                         </Box>
+                    </Grid>
+                    <Grid item xs={12} sx={STYLES.GRID_TEM}>
+                        <Box sx={STYLES.LIST_CONTAINER}>
                             <List sx={STYLES.LIST}>
                                 {agents.map(a => (
                                     <ListItem
@@ -149,8 +156,10 @@ const Mui = ({ title }) => {
                                     </ListItem>
                                 ))}
                             </List>
+                        </Box>
                     </Grid>
                 </Grid>
+            </Box>
         </div>
     );
 };

app/panels/samples/samples.js

@@ -35,6 +35,7 @@ const MODES = {
 
 //Стили
 const STYLES = {
+    ROOT: { height: "calc(100vh - 64px)" },
     CONTAINER: { textAlign: "center", paddingTop: "20px" },
     BACK_BUTTON: { position: "absolute", left: "20px", marginTop: "20px" }
 };
@@ -46,19 +47,19 @@ const STYLES = {
 //Примеры
 const Samples = () => {
     //Собственное состояние
-    const [mode, setMode] = useState("");
+    const [mode, setMode] = useState("MUI");
 
     //Генерация содержимого
     return (
-        <div>
+        <div style={STYLES.ROOT}>
             {mode ? (
-                <div>
+                <>
                     <Fab variant="extended" sx={STYLES.BACK_BUTTON} onClick={() => setMode("")}>
                         <Icon>arrow_back_ios</Icon>
                         {BUTTONS.NAVIGATE_BACK}
                     </Fab>
                     {React.createElement(MODES[mode]?.component || (() => {}), { title: MODES[mode]?.caption })}
-                </div>
+                </>
             ) : (
                 <div style={STYLES.CONTAINER}>
                     {Object.entries(MODES).map(m => (