redesign

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": {