redesign

frontend/src/pages/FileBrowser.tsx

@@ -17,6 +17,7 @@ import {
 	Stack,
 	TextField,
 	Typography,
+	useMediaQuery,
 } from "@mui/material";
 import {
 	useDirectoryListing,
@@ -538,6 +539,7 @@ function FfprobeDetails({ path, data }: { path: string; data: FfprobeData }) {
 
 export function FileBrowser() {
 	const [searchParams] = useSearchParams();
+	const isMobile = useMediaQuery("(max-width: 900px)");
 	const initialRequestedPath = searchParams.get("path") ?? "/";
 	const initialSelectedPath =
 		initialRequestedPath !== "/" &&
@@ -628,7 +630,7 @@ export function FileBrowser() {
 		<Stack spacing={2}>
 			<Typography variant="h5">File Browser</Typography>
 
-			<Stack direction="row" spacing={1}>
+			<Stack direction={isMobile ? "column" : "row"} spacing={1}>
 				<TextField
 					fullWidth
 					size="small"
@@ -637,10 +639,10 @@ export function FileBrowser() {
 					onChange={(e) => setPathInput(e.target.value)}
 					onKeyDown={handlePathSubmit}
 				/>
-				<Button variant="outlined" onClick={() => navigate(pathInput || "/")}>
+				<Button fullWidth={isMobile} variant="outlined" onClick={() => navigate(pathInput || "/")}>
 					Open
 				</Button>
-				<Button variant="outlined" onClick={() => refetch()}>
+				<Button fullWidth={isMobile} variant="outlined" onClick={() => refetch()}>
 					Refresh
 				</Button>
 			</Stack>
@@ -667,6 +669,7 @@ export function FileBrowser() {
 					columns={columns}
 					loading={isLoading}
 					rowSelectionModel={rowSelectionModel}
+					columnVisibilityModel={isMobile ? { ext: false, modified: false } : undefined}
 					hideFooter
 					sx={{
 						"& .MuiDataGrid-columnHeaders": {
@@ -731,7 +734,7 @@ export function FileBrowser() {
 								</FormControl>
 							</Grid>
 							<Grid size={{ xs: 12, md: 8 }}>
-								<Stack direction="row" spacing={1}>
+								<Stack direction={isMobile ? "column" : "row"} spacing={1}>
 									<Button
 										variant="contained"
 										disabled={!selectedJob || runJob.isPending}

frontend/src/pages/Media.tsx

@@ -17,10 +17,11 @@ import {
 	Stack,
 	TextField,
 	Typography,
+	useMediaQuery,
 } from "@mui/material";
 import {
 	useMediaStatus,
-	useMediaQuery,
+	useMediaQuery as useMediaDataQuery,
 	useBuildIndex,
 	useStopBuildIndex,
 	useForceStopBuildIndex,
@@ -40,6 +41,7 @@ function formatDuration(seconds: number | null | undefined): string {
 
 export function Media() {
 	const navigate = useNavigate();
+	const isMobile = useMediaQuery("(max-width: 900px)");
 	const { data: status } = useMediaStatus();
 	const buildIndex = useBuildIndex();
 	const stopBuildIndex = useStopBuildIndex();
@@ -53,7 +55,7 @@ export function Media() {
 	const [limit] = useState(100);
 	const [offset, setOffset] = useState(0);
 
-	const { data: queryResult, isLoading } = useMediaQuery({
+	const { data: queryResult, isLoading } = useMediaDataQuery({
 		types,
 		search,
 		hdr_filter: hdrFilter,
@@ -365,6 +367,21 @@ export function Media() {
 							navigate(`/files?path=${encodeURIComponent(row.path)}`);
 						}}
 						pageSizeOptions={[100]}
+						columnVisibilityModel={
+							isMobile
+								? {
+										series: false,
+										season: false,
+										episode: false,
+										bitrate: false,
+										video: false,
+										resolution: false,
+										date_added: false,
+										library: false,
+										path: false,
+									}
+								: undefined
+						}
 						hideFooter
 						sx={{
 							"& .MuiDataGrid-columnHeaders": {

frontend/src/pages/Users.tsx

@@ -36,6 +36,7 @@ import {
 	TextField,
 	Tooltip,
 	Typography,
+	useMediaQuery,
 } from "@mui/material";
 import { MetricCard } from "../components/MetricCard";
 import { SessionActivityPanel } from "../components/SessionActivityPanel";
@@ -62,6 +63,7 @@ export function UsersPage() {
 	const { data: activity } = useActivity();
 	const queueStatusQuery = useUserMessageQueueStatus();
 	const sendUserMessage = useSendUserMessage();
+	const isMobile = useMediaQuery("(max-width: 900px)");
 	const [search, setSearch] = useState("");
 	const [searchParams, setSearchParams] = useSearchParams();
 	const [selectedUserIds, setSelectedUserIds] = useState<string[]>([]);
@@ -684,6 +686,7 @@ export function UsersPage() {
 													py: 1.25,
 													verticalAlign: "middle",
 													textAlign: "center",
+									display: { xs: "none", md: "table-cell" },
 												}}
 											>
 												<Chip
@@ -715,6 +718,7 @@ export function UsersPage() {
 													py: 1.25,
 													verticalAlign: "middle",
 													textAlign: "center",
+									display: { xs: "none", md: "table-cell" },
 												}}
 											>
 												<Chip
@@ -736,6 +740,7 @@ export function UsersPage() {
 													py: 1.25,
 													verticalAlign: "middle",
 													textAlign: "center",
+									display: { xs: "none", md: "table-cell" },
 												}}
 											>
 												<Typography variant="body2" sx={{ fontWeight: 600 }}>
@@ -747,6 +752,7 @@ export function UsersPage() {
 													py: 1.25,
 													verticalAlign: "middle",
 													textAlign: "center",
+									display: { xs: "none", md: "table-cell" },
 												}}
 											>
 												<Chip
@@ -911,7 +917,7 @@ export function UsersPage() {
 				) : null}
 			</Drawer>
 
-			<Dialog open={composeOpen} onClose={closeCompose} fullWidth maxWidth="md">
+			<Dialog open={composeOpen} onClose={closeCompose} fullWidth maxWidth="md" fullScreen={isMobile}>
 				<DialogTitle sx={{ pr: 6 }}>
 					Message selected users
 					<IconButton