base commit

client/src/pages/home/ui/HomePage.tsx

@@ -3,11 +3,13 @@ import Alert from '@mui/material/Alert'
 import Box from '@mui/material/Box'
 import Button from '@mui/material/Button'
 import Collapse from '@mui/material/Collapse'
+import Divider from '@mui/material/Divider'
 import FormControl from '@mui/material/FormControl'
 import Grid from '@mui/material/Grid'
 import InputLabel from '@mui/material/InputLabel'
 import MenuItem from '@mui/material/MenuItem'
 import Pagination from '@mui/material/Pagination'
+import Paper from '@mui/material/Paper'
 import Select from '@mui/material/Select'
 import type { SelectChangeEvent } from '@mui/material/Select'
 import Skeleton from '@mui/material/Skeleton'
@@ -235,26 +237,58 @@ export function HomePage() {
                 ))}
               </Select>
             </FormControl>
-
-            <Box sx={{ flexGrow: 1, minWidth: { xs: '100%', md: 260 } }}>
-              <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mb: 0.5 }}>
-                Масштаб карточек
-              </Typography>
-              <ToggleButtonGroup
-                exclusive
-                size="small"
-                value={cardScale}
-                onChange={(_, v) => {
-                  if (v === 70 || v === 90 || v === 110 || v === 130) setCardScale(v)
-                }}
-              >
-                <ToggleButton value={70}>S</ToggleButton>
-                <ToggleButton value={90}>M</ToggleButton>
-                <ToggleButton value={110}>L</ToggleButton>
-                <ToggleButton value={130}>XL</ToggleButton>
-              </ToggleButtonGroup>
-            </Box>
           </Stack>
+
+          <Divider sx={{ my: 2 }} />
+
+          <Paper
+            variant="outlined"
+            sx={{
+              p: 1.5,
+              borderRadius: 2,
+              bgcolor: 'background.paper',
+              display: 'flex',
+              flexDirection: { xs: 'column', sm: 'row' },
+              gap: 1.5,
+              alignItems: { sm: 'center' },
+              justifyContent: 'space-between',
+            }}
+          >
+            <Box>
+              <Typography variant="subtitle2">Масштаб карточек</Typography>
+              <Typography variant="caption" color="text.secondary">
+                Выберите размер карточек в каталоге
+              </Typography>
+            </Box>
+
+            <ToggleButtonGroup
+              exclusive
+              size="small"
+              value={cardScale}
+              onChange={(_, v) => {
+                if (v === 70 || v === 90 || v === 110 || v === 130) setCardScale(v)
+              }}
+              sx={{
+                alignSelf: { xs: 'flex-start', sm: 'auto' },
+                '& .MuiToggleButton-root': {
+                  px: 2,
+                  fontWeight: 700,
+                  letterSpacing: 0.2,
+                  textTransform: 'none',
+                },
+                '& .MuiToggleButton-root.Mui-selected': {
+                  bgcolor: 'primary.main',
+                  color: 'primary.contrastText',
+                  '&:hover': { bgcolor: 'primary.dark' },
+                },
+              }}
+            >
+              <ToggleButton value={70}>S</ToggleButton>
+              <ToggleButton value={90}>M</ToggleButton>
+              <ToggleButton value={110}>L</ToggleButton>
+              <ToggleButton value={130}>XL</ToggleButton>
+            </ToggleButtonGroup>
+          </Paper>
         </Collapse>
       </Stack>