redesign

frontend/src/App.tsx

@@ -49,20 +49,75 @@ function Shell({
 }) {
 	const location = useLocation();
 	const current = location.pathname;
+	const isMobile = useMediaQuery("(max-width: 900px)");
 
 	return (
 		<>
 			<CssBaseline />
 			<AppBar position="sticky" color="inherit" elevation={0}>
-				<Toolbar sx={{ display: "flex", gap: 2, minHeight: 68 }}>
-					<Typography variant="h6" sx={{ mr: 2, fontWeight: 700 }}>
-						Manage
-					</Typography>
+				<Toolbar
+					sx={{
+						display: "flex",
+						flexDirection: { xs: "column", md: "row" },
+						alignItems: { xs: "stretch", md: "center" },
+						gap: 1,
+						py: { xs: 1, md: 0 },
+						minHeight: { xs: "auto", md: 68 },
+					}}
+				>
+					<Box
+						sx={{
+							display: "flex",
+							alignItems: "center",
+							justifyContent: "space-between",
+							width: "100%",
+							gap: 1.5,
+						}}
+					>
+						<Typography variant="h6" sx={{ fontWeight: 700, lineHeight: 1 }}>
+							Manage
+						</Typography>
+						<Stack
+							direction="row"
+							spacing={0.75}
+							sx={{
+								alignItems: "center",
+								flexWrap: "wrap",
+								justifyContent: "flex-end",
+							}}
+						>
+							{authLabel && (
+								<Chip size="small" variant="outlined" label={authLabel} />
+							)}
+							<Chip
+								size="small"
+								variant="outlined"
+								label={darkMode ? "Dark" : "Light"}
+							/>
+							{onSignOut && (
+								<Button size="small" variant="text" onClick={onSignOut}>
+									Sign out
+								</Button>
+							)}
+						</Stack>
+					</Box>
 					<Tabs
 						value={current}
 						textColor="primary"
 						indicatorColor="primary"
-						sx={{ flex: 1 }}
+						variant={isMobile ? "scrollable" : "standard"}
+						scrollButtons="auto"
+						allowScrollButtonsMobile
+						sx={{
+							width: "100%",
+							minHeight: 40,
+							"& .MuiTab-root": {
+								minHeight: 40,
+								py: 1,
+								px: 1.25,
+								minWidth: { xs: 96, md: 120 },
+							},
+						}}
 					>
 						<Tab value="/" label="Dashboard" component={NavLink} to="/" />
 						<Tab
@@ -73,31 +128,14 @@ function Shell({
 						/>
 						<Tab value="/media" label="Media" component={NavLink} to="/media" />
 						<Tab value="/users" label="Users" component={NavLink} to="/users" />
-						<Tab
-							value="/files"
-							label="File Browser"
-							component={NavLink}
-							to="/files"
-						/>
+						<Tab value="/files" label="Files" component={NavLink} to="/files" />
 					</Tabs>
-					<Stack direction="row" spacing={1} sx={{ alignItems: "center" }}>
-						{authLabel && (
-							<Chip size="small" variant="outlined" label={authLabel} />
-						)}
-						<Chip
-							size="small"
-							variant="outlined"
-							label={darkMode ? "Dark" : "Light"}
-						/>
-						{onSignOut && (
-							<Button size="small" variant="text" onClick={onSignOut}>
-								Sign out
-							</Button>
-						)}
-					</Stack>
 				</Toolbar>
 			</AppBar>
-			<Container maxWidth={false} sx={{ py: 3 }}>
+			<Container
+				maxWidth={false}
+				sx={{ py: { xs: 2, md: 3 }, px: { xs: 1.5, sm: 2.5, md: 3 } }}
+			>
 				<Routes>
 					<Route path="/" element={<Dashboard />} />
 					<Route path="/monitoring" element={<Monitoring />} />