redesign

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