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}