From fd5bfd161d2cd0138458d837783ee6cd0f522dc9 Mon Sep 17 00:00:00 2001
From: nimbleghost <132819643+nimbleghost@users.noreply.github.com>
Date: Mon, 26 Jun 2023 23:19:58 +0200
Subject: [PATCH 1/3] Web app UI: make preferences responsive

---
 web/src/components/Account.jsx |   2 +-
 web/src/components/Pref.jsx    | 100 ++++++++++++++++++---------------
 2 files changed, 55 insertions(+), 47 deletions(-)

diff --git a/web/src/components/Account.jsx b/web/src/components/Account.jsx
index a6a624b8..977bf161 100644
--- a/web/src/components/Account.jsx
+++ b/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>
diff --git a/web/src/components/Pref.jsx b/web/src/components/Pref.jsx
index a725d115..5e64c41f 100644
--- a/web/src/components/Pref.jsx
+++ b/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 PrefGroup = styled("div", { attrs: { role: "table" } })`
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+`;
 
-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",
-        }}
-      >
+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>
+);

From 4a1adaeab2e4e4ef9538f51982341a66d63044eb Mon Sep 17 00:00:00 2001
From: nimbleghost <132819643+nimbleghost@users.noreply.github.com>
Date: Mon, 26 Jun 2023 23:34:22 +0200
Subject: [PATCH 2/3] Make login and sign up form responsive

---
 web/src/components/AvatarBox.jsx | 27 ++++++++++++++-------------
 web/src/components/Login.jsx     |  2 +-
 web/src/components/Signup.jsx    |  2 +-
 3 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/web/src/components/AvatarBox.jsx b/web/src/components/AvatarBox.jsx
index 10378683..37c85d4e 100644
--- a/web/src/components/AvatarBox.jsx
+++ b/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;
diff --git a/web/src/components/Login.jsx b/web/src/components/Login.jsx
index 4efec255..5c1af249 100644
--- a/web/src/components/Login.jsx
+++ b/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
diff --git a/web/src/components/Signup.jsx b/web/src/components/Signup.jsx
index 2e97956f..7da54c49 100644
--- a/web/src/components/Signup.jsx
+++ b/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

From d51ca209924ac6206b8425f074161c04669fbc05 Mon Sep 17 00:00:00 2001
From: nimbleghost <132819643+nimbleghost@users.noreply.github.com>
Date: Mon, 26 Jun 2023 23:36:04 +0200
Subject: [PATCH 3/3] Use dvh for main height

This takes into account browser UI for the viewport calculation
---
 web/src/components/App.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/components/App.jsx b/web/src/components/App.jsx
index 7fdc706e..9b939ea5 100644
--- a/web/src/components/App.jsx
+++ b/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]),
     }}