Optimize UI for mobile

README.md

@@ -188,6 +188,7 @@ The following changes are already implemented:
 * 💬 [Add room messages viewer with filters and jump-to-date](https://github.com/etkecc/synapse-admin/commit/60818ca3604aef61e2b5abc0d92e14771bb53637)
 * 🏗️ [Add Room hierarchy tab](https://github.com/etkecc/synapse-admin/commit/566b7148b5cb3e2fab55078621ba2cb4203b21a1)
 * ⚙️ [Add control of admin flags for Matrix Client-Server APIs](https://github.com/etkecc/synapse-admin/commit/b272cc11945d8e6adabb3cfe4904ad0ac063549d)
+* 📱 [Optimize UI for mobile](https://github.com/etkecc/synapse-admin/pull/1104)
 
 #### exclusive for [etke.cc](https://etke.cc) customers
 

src/auth-callback-error.tsx

@@ -40,7 +40,7 @@ const AuthCallbackErrorView = ({ message, onBack }: { message: string; onBack: (
       )}
       <Card className="card">
         <Box className="avatar">
-          <Avatar sx={{ width: "120px", height: "120px" }} src={logoUrl} />
+          <Avatar sx={{ width: { xs: "80px", sm: "120px" }, height: { xs: "80px", sm: "120px" } }} src={logoUrl} />
         </Box>
         <Box className="hint">{translate("synapseadmin.auth.welcome", { name: welcomeTo })}</Box>
         <Box className="form">
@@ -52,7 +52,7 @@ const AuthCallbackErrorView = ({ message, onBack }: { message: string; onBack: (
           </Typography>
         </Box>
         <CardActions className="actions">
-          <Button size="small" variant="contained" type="button" color="primary" onClick={onBack} fullWidth>
+          <Button variant="contained" type="button" color="primary" onClick={onBack} fullWidth>
             {translate("ra.action.back")}
           </Button>
         </CardActions>

src/components/BlockRoomButton.tsx

@@ -10,6 +10,8 @@ import {
   DialogTitle,
   TextField,
 } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
+import useMediaQuery from "@mui/material/useMediaQuery";
 import { useEffect, useState } from "react";
 import {
   Button,
@@ -30,6 +32,8 @@ import { SynapseDataProvider } from "../providers/types";
  * Block requires confirmation modal, unblock is direct.
  */
 export const BlockRoomButton = () => {
+  const theme = useTheme();
+  const fullScreen = useMediaQuery(theme.breakpoints.down("sm"));
   const record = useRecordContext();
   const [open, setOpen] = useState(false);
   const [blocked, setBlocked] = useState<boolean | null>(null);
@@ -110,7 +114,7 @@ export const BlockRoomButton = () => {
       <Button label="resources.rooms.action.block.label" onClick={() => setOpen(true)} disabled={loading}>
         <BlockIcon />
       </Button>
-      <Dialog open={open} onClose={() => setOpen(false)} maxWidth="sm" fullWidth>
+      <Dialog open={open} onClose={() => setOpen(false)} maxWidth="sm" fullWidth fullScreen={fullScreen}>
         <DialogTitle>{translate("resources.rooms.action.block.title", { room: roomName })}</DialogTitle>
         <DialogContent>
           <DialogContentText>{translate("resources.rooms.action.block.content")}</DialogContentText>
@@ -138,6 +142,8 @@ export const BlockRoomButton = () => {
  * Bulk block/unblock buttons for room lists (main room list + joined_rooms).
  */
 export const BlockRoomBulkButton = () => {
+  const theme = useTheme();
+  const fullScreen = useMediaQuery(theme.breakpoints.down("sm"));
   const { selectedIds } = useListContext();
   const [open, setOpen] = useState(false);
   const [loading, setLoading] = useState(false);
@@ -170,7 +176,7 @@ export const BlockRoomBulkButton = () => {
       <Button label="resources.rooms.action.block.label" onClick={() => setOpen(true)} disabled={loading}>
         <BlockIcon />
       </Button>
-      <Dialog open={open} onClose={() => setOpen(false)} maxWidth="sm" fullWidth>
+      <Dialog open={open} onClose={() => setOpen(false)} maxWidth="sm" fullWidth fullScreen={fullScreen}>
         <DialogTitle>
           {translate("resources.rooms.action.block.title_bulk", { smart_count: selectedIds.length })}
         </DialogTitle>
@@ -234,6 +240,8 @@ export const UnblockRoomBulkButton = () => {
  * Toolbar button above the main room list to block a room by ID.
  */
 export const BlockRoomByIdButton = () => {
+  const theme = useTheme();
+  const fullScreen = useMediaQuery(theme.breakpoints.down("sm"));
   const [open, setOpen] = useState(false);
   const [roomId, setRoomId] = useState("");
   const [loading, setLoading] = useState(false);
@@ -268,7 +276,7 @@ export const BlockRoomByIdButton = () => {
       <Button label="resources.rooms.action.block.label" onClick={() => setOpen(true)}>
         <BlockIcon />
       </Button>
-      <Dialog open={open} onClose={() => setOpen(false)} maxWidth="sm" fullWidth>
+      <Dialog open={open} onClose={() => setOpen(false)} maxWidth="sm" fullWidth fullScreen={fullScreen}>
         <DialogTitle>{translate("resources.rooms.action.block.title_by_id")}</DialogTitle>
         <DialogContent>
           <DialogContentText sx={{ mb: 2 }}>{translate("resources.rooms.action.block.content")}</DialogContentText>

src/components/DeleteRoomButton.tsx

@@ -10,6 +10,8 @@ import {
   DialogContentText,
   DialogTitle,
 } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
+import useMediaQuery from "@mui/material/useMediaQuery";
 import { Fragment, useCallback, useEffect, useRef, useState } from "react";
 import {
   Button,
@@ -37,6 +39,8 @@ interface DeleteRoomButtonProps {
 const resourceName = "rooms";
 
 const DeleteRoomButton: React.FC<DeleteRoomButtonProps> = props => {
+  const theme = useTheme();
+  const fullScreen = useMediaQuery(theme.breakpoints.down("sm"));
   const translate = useTranslate();
   const [open, setOpen] = useState(false);
   const [block, setBlock] = useState(false);
@@ -163,7 +167,7 @@ const DeleteRoomButton: React.FC<DeleteRoomButtonProps> = props => {
       >
         <ActionDelete />
       </Button>
-      <Dialog open={open} onClose={handleDialogClose}>
+      <Dialog open={open} onClose={handleDialogClose} maxWidth="sm" fullWidth fullScreen={fullScreen}>
         <DialogTitle>{translate(props.confirmTitle)}</DialogTitle>
         <DialogContent>
           <DialogContentText>{translate(props.confirmContent)}</DialogContentText>

src/components/DeleteUserButton.tsx

@@ -2,16 +2,19 @@ import ActionCheck from "@mui/icons-material/CheckCircle";
 import ActionDelete from "@mui/icons-material/Delete";
 import AlertError from "@mui/icons-material/ErrorOutline";
 import {
-  Button,
+  Button as MuiButton,
   CircularProgress,
   Dialog,
   DialogActions,
   DialogContent,
   DialogContentText,
   DialogTitle,
 } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
+import useMediaQuery from "@mui/material/useMediaQuery";
 import { Fragment, useCallback, useEffect, useRef, useState } from "react";
 import {
+  Button,
   SimpleForm,
   BooleanInput,
   useTranslate,
@@ -35,6 +38,8 @@ interface DeleteUserButtonProps {
 const resourceName = "users";
 
 const DeleteUserButton: React.FC<DeleteUserButtonProps> = props => {
+  const theme = useTheme();
+  const fullScreen = useMediaQuery(theme.breakpoints.down("sm"));
   const translate = useTranslate();
   const [open, setOpen] = useState(false);
   const [deleteMedia, setDeleteMedia] = useState(false);
@@ -159,22 +164,16 @@ const DeleteUserButton: React.FC<DeleteUserButtonProps> = props => {
   return (
     <Fragment>
       <Button
+        label="ra.action.delete"
         onClick={handleDialogOpen}
         disabled={loading}
         className={"ra-delete-button"}
         key="button"
-        size="small"
-        sx={{
-          "&.MuiButton-sizeSmall": {
-            lineHeight: 1.5,
-          },
-        }}
         color={"error"}
-        startIcon={<ActionDelete />}
       >
-        {translate("ra.action.delete")}
+        <ActionDelete />
       </Button>
-      <Dialog open={open} onClose={handleDialogClose}>
+      <Dialog open={open} onClose={handleDialogClose} maxWidth="sm" fullWidth fullScreen={fullScreen}>
         <DialogTitle>{translate(props.confirmTitle)}</DialogTitle>
         <DialogContent>
           <DialogContentText>{translate(props.confirmContent)}</DialogContentText>
@@ -209,18 +208,18 @@ const DeleteUserButton: React.FC<DeleteUserButtonProps> = props => {
           )}
         </DialogContent>
         <DialogActions>
-          <Button onClick={handleDialogClose} startIcon={<AlertError />}>
+          <MuiButton onClick={handleDialogClose} startIcon={<AlertError />}>
             {translate("ra.action.cancel")}
-          </Button>
-          <Button
+          </MuiButton>
+          <MuiButton
             disabled={loading}
             onClick={handleConfirm}
             className={"ra-confirm RaConfirm-confirmPrimary"}
             autoFocus
             startIcon={loading ? <CircularProgress size={16} /> : <ActionCheck />}
           >
             {translate("ra.action.confirm")}
-          </Button>
+          </MuiButton>
         </DialogActions>
       </Dialog>
     </Fragment>

src/components/DeviceCreateButton.tsx

@@ -5,7 +5,7 @@ import { Button as MuiButton, Dialog, DialogActions, DialogContent, DialogTitle,
 import { useTheme } from "@mui/material/styles";
 import useMediaQuery from "@mui/material/useMediaQuery";
 import { useState } from "react";
-import { Button, useNotify, useRecordContext, useRefresh, useTranslate } from "react-admin";
+import { useNotify, useRecordContext, useRefresh, useTranslate } from "react-admin";
 
 import { jsonClient } from "../providers/httpClients";
 import { invalidateManyRefCache } from "../providers/resourceMap";
@@ -50,9 +50,15 @@ const DeviceCreateButton = () => {
 
   return (
     <>
-      <Button label="resources.devices.action.create.label" onClick={() => setOpen(true)}>
-        <AddIcon />
-      </Button>
+      <MuiButton
+        variant="outlined"
+        size="small"
+        startIcon={<AddIcon />}
+        onClick={() => setOpen(true)}
+        fullWidth={fullScreen}
+      >
+        {translate("resources.devices.action.create.label")}
+      </MuiButton>
       <Dialog open={open} onClose={handleClose} maxWidth="sm" fullWidth fullScreen={fullScreen}>
         <DialogTitle>{translate("resources.devices.action.create.title")}</DialogTitle>
         <DialogContent>

src/components/Footer.tsx

@@ -34,23 +34,26 @@ const Footer = ({ logoSrc = "./images/logo.webp" }: { logoSrc?: string }) => {
       <Avatar src={logoSrc} sx={{ width: "1rem", height: "1rem", display: "inline-block", verticalAlign: "sub" }} />{" "}
       <Link href="https://github.com/etkecc/synapse-admin" target="_blank" sx={{ color: "inherit" }}>
         Synapse Admin {version}
-      </Link>{" "}
-      by{" "}
-      <Link
-        href="https://etke.cc/?utm_source=synapse-admin&utm_medium=footer&utm_campaign=synapse-admin"
-        target="_blank"
-        sx={{ color: "inherit" }}
-      >
-        etke.cc
-      </Link>{" "}
-      (originally developed by Awesome Technologies Innovationslabor GmbH).{" "}
-      <Link
-        sx={{ fontWeight: "bold", color: "inherit" }}
-        href="https://matrix.to/#/#synapse-admin:etke.cc"
-        target="_blank"
-      >
-        #synapse-admin:etke.cc
       </Link>
+      <Box component="span" sx={{ display: { xs: "none", sm: "inline" } }}>
+        {" "}
+        by{" "}
+        <Link
+          href="https://etke.cc/?utm_source=synapse-admin&utm_medium=footer&utm_campaign=synapse-admin"
+          target="_blank"
+          sx={{ color: "inherit" }}
+        >
+          etke.cc
+        </Link>{" "}
+        (originally developed by Awesome Technologies Innovationslabor GmbH).{" "}
+        <Link
+          sx={{ fontWeight: "bold", color: "inherit" }}
+          href="https://matrix.to/#/#synapse-admin:etke.cc"
+          target="_blank"
+        >
+          #synapse-admin:etke.cc
+        </Link>
+      </Box>
     </Box>
   );
 };

src/components/LoginAsUserButton.tsx

@@ -13,12 +13,16 @@ import {
   TextField,
   Typography,
 } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
+import useMediaQuery from "@mui/material/useMediaQuery";
 import { useState } from "react";
 import { Button, useDataProvider, useLocale, useNotify, useRecordContext, useTranslate } from "react-admin";
 
 import { SynapseDataProvider } from "../providers/types";
 
 export const LoginAsUserButton = () => {
+  const theme = useTheme();
+  const fullScreen = useMediaQuery(theme.breakpoints.down("sm"));
   const record = useRecordContext();
   const [open, setOpen] = useState(false);
   const [resultOpen, setResultOpen] = useState(false);
@@ -74,7 +78,7 @@ export const LoginAsUserButton = () => {
       <Button label="resources.users.action.login_as.label" onClick={handleOpen} disabled={loading}>
         <LoginIcon />
       </Button>
-      <Dialog open={open} onClose={handleClose} maxWidth="sm" fullWidth>
+      <Dialog open={open} onClose={handleClose} maxWidth="sm" fullWidth fullScreen={fullScreen}>
         <DialogTitle>{translate("resources.users.action.login_as.title")}</DialogTitle>
         <DialogContent>
           <DialogContentText sx={{ mb: 2 }}>
@@ -110,7 +114,7 @@ export const LoginAsUserButton = () => {
           </MuiButton>
         </DialogActions>
       </Dialog>
-      <Dialog open={resultOpen} onClose={handleResultClose} maxWidth="sm" fullWidth>
+      <Dialog open={resultOpen} onClose={handleResultClose} maxWidth="sm" fullWidth fullScreen={fullScreen}>
         <DialogTitle>{translate("resources.users.action.login_as.result_title", { user: record.id })}</DialogTitle>
         <DialogContent>
           <TextField

src/components/LoginFormBox.tsx

@@ -139,6 +139,7 @@ const LoginFormBox = styled(Box, {
       [`& .card`]: {
         width: "100%",
         marginTop: "0",
+        marginBottom: "2rem",
       },
     },
     [`& .avatar`]: {

src/components/PurgeHistoryButton.tsx

@@ -13,12 +13,16 @@ import {
   FormControlLabel,
   TextField,
 } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
+import useMediaQuery from "@mui/material/useMediaQuery";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { Button, useDataProvider, useNotify, useRecordContext, useTranslate } from "react-admin";
 
 import { SynapseDataProvider } from "../providers/types";
 
 export const PurgeHistoryButton = () => {
+  const theme = useTheme();
+  const fullScreen = useMediaQuery(theme.breakpoints.down("sm"));
   const record = useRecordContext();
   const [open, setOpen] = useState(false);
   const [loading, setLoading] = useState(false);
@@ -105,7 +109,7 @@ export const PurgeHistoryButton = () => {
       <Button label="resources.rooms.action.purge_history.label" onClick={() => setOpen(true)}>
         <HistoryIcon />
       </Button>
-      <Dialog open={open} onClose={handleClose} maxWidth="sm" fullWidth>
+      <Dialog open={open} onClose={handleClose} maxWidth="sm" fullWidth fullScreen={fullScreen}>
         <DialogTitle>{translate("resources.rooms.action.purge_history.title", { roomName })}</DialogTitle>
         <DialogContent>
           <DialogContentText sx={{ mb: 2 }}>

src/components/QuarantineAllMediaButton.tsx

@@ -9,6 +9,8 @@ import {
   DialogContentText,
   DialogTitle,
 } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
+import useMediaQuery from "@mui/material/useMediaQuery";
 import { useState } from "react";
 import { Button, useDataProvider, useNotify, useRecordContext, useTranslate } from "react-admin";
 
@@ -19,6 +21,8 @@ import { SynapseDataProvider } from "../providers/types";
  * Shows a confirmation dialog before proceeding.
  */
 export const QuarantineRoomMediaButton = () => {
+  const theme = useTheme();
+  const fullScreen = useMediaQuery(theme.breakpoints.down("sm"));
   const record = useRecordContext();
   const [open, setOpen] = useState(false);
   const [loading, setLoading] = useState(false);
@@ -60,7 +64,7 @@ export const QuarantineRoomMediaButton = () => {
       <Button label="resources.rooms.action.quarantine_all.label" onClick={() => setOpen(true)}>
         <BlockIcon />
       </Button>
-      <Dialog open={open} onClose={() => setOpen(false)} maxWidth="sm" fullWidth>
+      <Dialog open={open} onClose={() => setOpen(false)} maxWidth="sm" fullWidth fullScreen={fullScreen}>
         <DialogTitle>{translate("resources.rooms.action.quarantine_all.title", { roomName })}</DialogTitle>
         <DialogContent>
           <DialogContentText>{translate("resources.rooms.action.quarantine_all.content")}</DialogContentText>
@@ -88,6 +92,8 @@ export const QuarantineRoomMediaButton = () => {
  * Shows a confirmation dialog before proceeding.
  */
 export const QuarantineUserMediaButton = () => {
+  const theme = useTheme();
+  const fullScreen = useMediaQuery(theme.breakpoints.down("sm"));
   const record = useRecordContext();
   const [open, setOpen] = useState(false);
   const [loading, setLoading] = useState(false);
@@ -129,7 +135,7 @@ export const QuarantineUserMediaButton = () => {
       <Button label="resources.users.action.quarantine_all.label" onClick={() => setOpen(true)}>
         <BlockIcon />
       </Button>
-      <Dialog open={open} onClose={() => setOpen(false)} maxWidth="sm" fullWidth>
+      <Dialog open={open} onClose={() => setOpen(false)} maxWidth="sm" fullWidth fullScreen={fullScreen}>
         <DialogTitle>{translate("resources.users.action.quarantine_all.title", { userName })}</DialogTitle>
         <DialogContent>
           <DialogContentText>{translate("resources.users.action.quarantine_all.content")}</DialogContentText>