Merge pull request #784 from nimbleghost/pref-responsive

Web app UI: make preferences responsive

web/src/components/Account.jsx

@@ -785,7 +785,7 @@ const Tokens = () => {
             }}
           />
         </Paragraph>
-        {tokens?.length > 0 && <TokensTable tokens={tokens} />}
+        <div style={{ width: "100%", overflowX: "scroll" }}>{tokens?.length > 0 && <TokensTable tokens={tokens} />}</div>
       </CardContent>
       <CardActions>
         <Button onClick={handleCreateClick}>{t("account_tokens_table_create_token_button")}</Button>

web/src/components/App.jsx

@@ -118,7 +118,7 @@ const Main = (props) => (
       flexDirection: "column",
       padding: 3,
       width: { sm: `calc(100% - ${Navigation.width}px)` },
-      height: "100vh",
+      height: "100dvh",
       overflow: "auto",
       backgroundColor: ({ palette }) => (palette.mode === "light" ? palette.grey[100] : palette.grey[900]),
     }}

web/src/components/AvatarBox.jsx

@@ -1,22 +1,23 @@
 import * as React from "react";
-import { Avatar, Box } from "@mui/material";
+import { Avatar, Box, styled } from "@mui/material";
 import logo from "../img/ntfy-filled.svg";
 
+const AvatarBoxContainer = styled(Box)`
+  display: flex;
+  flex-grow: 1;
+  justify-content: center;
+  flex-direction: column;
+  align-content: center;
+  align-items: center;
+  height: 100dvh;
+  max-width: min(400px, 90dvw);
+  margin: auto;
+`;
 const AvatarBox = (props) => (
-  <Box
-    sx={{
-      display: "flex",
-      flexGrow: 1,
-      justifyContent: "center",
-      flexDirection: "column",
-      alignContent: "center",
-      alignItems: "center",
-      height: "100vh",
-    }}
-  >
+  <AvatarBoxContainer>
     <Avatar sx={{ m: 2, width: 64, height: 64, borderRadius: 3 }} src={logo} variant="rounded" />
     {props.children}
-  </Box>
+  </AvatarBoxContainer>
 );
 
 export default AvatarBox;

web/src/components/Login.jsx

@@ -45,7 +45,7 @@ const Login = () => {
   return (
     <AvatarBox>
       <Typography sx={{ typography: "h6" }}>{t("login_title")}</Typography>
-      <Box component="form" onSubmit={handleSubmit} noValidate sx={{ mt: 1, maxWidth: 400 }}>
+      <Box component="form" onSubmit={handleSubmit} noValidate sx={{ mt: 1 }}>
         <TextField
           margin="dense"
           required

web/src/components/Pref.jsx

@@ -1,52 +1,60 @@
+import { styled } from "@mui/material";
 import * as React from "react";
 
-export const PrefGroup = (props) => <div role="table">{props.children}</div>;
-
-export const Pref = (props) => {
-  const justifyContent = props.alignTop ? "normal" : "center";
-  return (
-    <div
-      role="row"
-      style={{
-        display: "flex",
-        flexDirection: "row",
-        marginTop: "10px",
-        marginBottom: "20px",
-      }}
-    >
-      <div
-        role="cell"
-        id={props.labelId ?? ""}
-        aria-label={props.title}
-        style={{
-          flex: "1 0 40%",
-          display: "flex",
-          flexDirection: "column",
-          justifyContent,
-          paddingRight: "30px",
-        }}
-      >
+export const PrefGroup = styled("div", { attrs: { role: "table" } })`
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+`;
+
+const PrefRow = styled("div")`
+  display: flex;
+  flex-direction: row;
+
+  > :first-child {
+    flex: 1 0 40%;
+    display: flex;
+    flex-direction: column;
+    justify-content: ${(props) => (props.alignTop ? "normal" : "center")};
+  }
+
+  > :last-child {
+    flex: 1 0 calc(60% - 50px);
+    display: flex;
+    flex-direction: column;
+    justify-content: ${(props) => (props.alignTop ? "normal" : "center")};
+  }
+
+  @media (max-width: 1000px) {
+    flex-direction: column;
+    gap: 10px;
+
+    > :first-child,
+    > :last-child {
+      flex: unset;
+    }
+
+    > :last-child {
+      .MuiFormControl-root {
+        margin: 0;
+      }
+    }
+  }
+`;
+
+export const Pref = (props) => (
+  <PrefRow role="row" alignTop={props.alignTop}>
+    <div role="cell" id={props.labelId ?? ""} aria-label={props.title}>
+      <div>
+        <b>{props.title}</b>
+        {props.subtitle && <em> ({props.subtitle})</em>}
+      </div>
+      {props.description && (
         <div>
-          <b>{props.title}</b>
-          {props.subtitle && <em> ({props.subtitle})</em>}
+          <em>{props.description}</em>
         </div>
-        {props.description && (
-          <div>
-            <em>{props.description}</em>
-          </div>
-        )}
-      </div>
-      <div
-        role="cell"
-        style={{
-          flex: "1 0 calc(60% - 50px)",
-          display: "flex",
-          flexDirection: "column",
-          justifyContent,
-        }}
-      >
-        {props.children}
-      </div>
+      )}
     </div>
-  );
-};
+    <div role="cell">{props.children}</div>
+  </PrefRow>
+);

web/src/components/Signup.jsx

@@ -52,7 +52,7 @@ const Signup = () => {
   return (
     <AvatarBox>
       <Typography sx={{ typography: "h6" }}>{t("signup_title")}</Typography>
-      <Box component="form" onSubmit={handleSubmit} noValidate sx={{ mt: 1, maxWidth: 400 }}>
+      <Box component="form" onSubmit={handleSubmit} noValidate sx={{ mt: 1 }}>
         <TextField
           margin="dense"
           required