redesign

frontend/src/components/MetricCard.tsx

@@ -8,8 +8,8 @@ interface Props {
 
 export function MetricCard({ label, value, subtext }: Props) {
 	return (
-		<Card variant="outlined">
-			<CardContent>
+		<Card variant="outlined" sx={{ height: "100%" }}>
+			<CardContent sx={{ p: { xs: 1.5, sm: 2 } }}>
 				<Typography
 					variant="caption"
 					color="text.secondary"
@@ -17,14 +17,22 @@ export function MetricCard({ label, value, subtext }: Props) {
 				>
 					{label}
 				</Typography>
-				<Typography variant="h5" sx={{ mt: 0.5, fontWeight: 700 }}>
+				<Typography
+					variant="h5"
+					sx={{
+						mt: 0.5,
+						fontWeight: 700,
+						fontSize: { xs: "1.05rem", sm: "1.5rem" },
+						lineHeight: 1.15,
+					}}
+				>
 					{value}
 				</Typography>
 				{subtext && (
 					<Typography
 						variant="caption"
 						color="text.secondary"
-						sx={{ whiteSpace: "pre-line" }}
+						sx={{ whiteSpace: "pre-line", display: "block", mt: 0.25 }}
 					>
 						{subtext}
 					</Typography>

frontend/src/components/SessionActivityPanel.tsx

@@ -79,7 +79,7 @@ export function SessionActivityPanel({
 		<TableContainer
 			component={Paper}
 			variant="outlined"
-			sx={{ maxHeight: 280, borderColor: "divider", borderRadius: 1 }}
+			sx={{ maxHeight: 280, borderColor: "divider", borderRadius: 1, overflowX: "auto" }}
 		>
 			<Table size="small" stickyHeader aria-label="Session activity details">
 				<TableHead>
@@ -198,7 +198,7 @@ export function SessionActivityPanel({
 										}
 									/>
 								</TableCell>
-								<TableCell sx={{ py: 0.75, minWidth: 140 }}>
+								<TableCell sx={{ py: 0.75, minWidth: 140, display: { xs: "none", md: "table-cell" } }}>
 									<Typography
 										variant="body2"
 										noWrap
@@ -210,12 +210,12 @@ export function SessionActivityPanel({
 										{session.type || "—"}
 									</Typography>
 								</TableCell>
-								<TableCell sx={{ py: 0.75, minWidth: 140 }}>
+								<TableCell sx={{ py: 0.75, minWidth: 140, display: { xs: "none", md: "table-cell" } }}>
 									<Typography variant="body2" noWrap>
 										{session.device || "Unknown device"}
 									</Typography>
 								</TableCell>
-								<TableCell sx={{ py: 0.75, whiteSpace: "nowrap" }}>
+								<TableCell sx={{ py: 0.75, whiteSpace: "nowrap", display: { xs: "none", md: "table-cell" } }}>
 									<Typography variant="body2" noWrap>
 										{session.transcoding === "yes"
 											? session.transcoding_type