From edfcea04192fd098531f512ec45c45b47e209af3 Mon Sep 17 00:00:00 2001
From: Quentin Gliech <quenting@element.io>
Date: Mon, 19 Feb 2024 17:40:28 +0100
Subject: [PATCH] Make the layout wider on "account" pages

This also fixes a bug where a double "layout" was applied to the not
found pages.

It also sets the layout min height to use 100svh instead of 100vh, so
that it doesn't unecessarily scroll on iOS.
---
 .../src/components/Layout/Layout.module.css   |  8 ++
 frontend/src/components/Layout/Layout.tsx     |  7 +-
 .../LoadingScreen/LoadingScreen.module.css    |  6 +-
 .../src/components/NavBar/NavBar.module.css   |  1 -
 frontend/src/main.tsx                         |  5 +-
 frontend/src/routes/_account.tsx              |  5 +-
 frontend/src/routes/clients.$id.tsx           |  7 +-
 frontend/src/routes/devices.$id.tsx           | 17 ++--
 frontend/src/routes/emails.$id.verify.tsx     |  7 +-
 frontend/src/routes/reset-cross-signing.tsx   | 99 ++++++++++---------
 10 files changed, 95 insertions(+), 67 deletions(-)

diff --git a/frontend/src/components/Layout/Layout.module.css b/frontend/src/components/Layout/Layout.module.css
index 3b7d3d33..2d04a4db 100644
--- a/frontend/src/components/Layout/Layout.module.css
+++ b/frontend/src/components/Layout/Layout.module.css
@@ -19,11 +19,19 @@
   flex-direction: column;
 
   max-width: calc(420px + var(--cpd-space-5x) * 2);
+
+  /* Fallback for browsers that do not support 100svh */
   min-height: 100vh;
+  min-height: 100svh;
+
   margin: 0 auto;
   padding-inline: var(--cpd-space-5x);
   padding-block: var(--cpd-space-12x);
   gap: var(--cpd-space-8x);
+
+  &.wide {
+    max-width: calc(520px + var(--cpd-space-5x) * 2);
+  }
 }
 
 @media screen and (min-width: 768px) {
diff --git a/frontend/src/components/Layout/Layout.tsx b/frontend/src/components/Layout/Layout.tsx
index 5ae6bb5b..a68c9952 100644
--- a/frontend/src/components/Layout/Layout.tsx
+++ b/frontend/src/components/Layout/Layout.tsx
@@ -12,6 +12,8 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+import cx from "classnames";
+
 import appConfig from "../../config";
 import Footer from "../Footer";
 
@@ -20,8 +22,9 @@ import styles from "./Layout.module.css";
 const Layout: React.FC<{
   children?: React.ReactNode;
   dontSuspend?: boolean;
-}> = ({ children, dontSuspend }) => (
-  <div className={styles.layoutContainer}>
+  wide?: boolean;
+}> = ({ children, dontSuspend, wide }) => (
+  <div className={cx(styles.layoutContainer, wide && styles.wide)}>
     {children}
 
     <Footer
diff --git a/frontend/src/components/LoadingScreen/LoadingScreen.module.css b/frontend/src/components/LoadingScreen/LoadingScreen.module.css
index 8ee99980..aa2706b5 100644
--- a/frontend/src/components/LoadingScreen/LoadingScreen.module.css
+++ b/frontend/src/components/LoadingScreen/LoadingScreen.module.css
@@ -15,7 +15,11 @@
 
 .loading-screen {
     display: flex;
+
+    /* Fallback for browsers that do not support 100svh */
     min-height: 100vh;
+    min-height: 100svh;
+
     justify-content: center;
     align-items: center;
-}
\ No newline at end of file
+}
diff --git a/frontend/src/components/NavBar/NavBar.module.css b/frontend/src/components/NavBar/NavBar.module.css
index e1e42b6b..9e07c393 100644
--- a/frontend/src/components/NavBar/NavBar.module.css
+++ b/frontend/src/components/NavBar/NavBar.module.css
@@ -15,7 +15,6 @@
 
 .nav-bar {
     border-bottom: var(--cpd-border-width-1) solid var(--cpd-color-gray-400);
-    padding: 0 var(--cpd-space-10x);
 }
 
 .nav-bar-items {
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index cc43e360..0b9d7c05 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -21,7 +21,6 @@ import { Provider as UrqlProvider } from "urql";
 
 import ErrorBoundary from "./components/ErrorBoundary";
 import GenericError from "./components/GenericError";
-import Layout from "./components/Layout";
 import LoadingScreen from "./components/LoadingScreen";
 import config from "./config";
 import { client } from "./graphql";
@@ -51,9 +50,7 @@ createRoot(document.getElementById("root") as HTMLElement).render(
         <UrqlProvider value={client}>
           <I18nextProvider i18n={i18n}>
             <TooltipProvider>
-              <Layout>
-                <RouterProvider router={router} context={{ client }} />
-              </Layout>
+              <RouterProvider router={router} context={{ client }} />
             </TooltipProvider>
           </I18nextProvider>
         </UrqlProvider>
diff --git a/frontend/src/routes/_account.tsx b/frontend/src/routes/_account.tsx
index 21e2e29e..27fea9ad 100644
--- a/frontend/src/routes/_account.tsx
+++ b/frontend/src/routes/_account.tsx
@@ -16,6 +16,7 @@ import { Outlet, createFileRoute, notFound } from "@tanstack/react-router";
 import { useTranslation } from "react-i18next";
 import { useQuery } from "urql";
 
+import Layout from "../components/Layout";
 import NavBar from "../components/NavBar";
 import NavItem from "../components/NavItem";
 import UserGreeting from "../components/UserGreeting";
@@ -53,7 +54,7 @@ function Account(): React.ReactElement {
   if (user?.__typename !== "User") throw notFound();
 
   return (
-    <>
+    <Layout wide>
       <UserGreeting user={user} />
 
       <NavBar>
@@ -66,6 +67,6 @@ function Account(): React.ReactElement {
       </NavBar>
 
       <Outlet />
-    </>
+    </Layout>
   );
 }
diff --git a/frontend/src/routes/clients.$id.tsx b/frontend/src/routes/clients.$id.tsx
index 2e5ecb0e..5299c479 100644
--- a/frontend/src/routes/clients.$id.tsx
+++ b/frontend/src/routes/clients.$id.tsx
@@ -16,6 +16,7 @@ import { createFileRoute, notFound } from "@tanstack/react-router";
 import { useQuery } from "urql";
 
 import OAuth2ClientDetail from "../components/Client/OAuth2ClientDetail";
+import Layout from "../components/Layout";
 import { graphql } from "../gql";
 
 const QUERY = graphql(/* GraphQL */ `
@@ -49,5 +50,9 @@ function ClientDetail(): React.ReactElement {
   const client = result.data?.oauth2Client;
   if (!client) throw new Error(); // Should have been caught by the loader
 
-  return <OAuth2ClientDetail client={client} />;
+  return (
+    <Layout>
+      <OAuth2ClientDetail client={client} />
+    </Layout>
+  );
 }
diff --git a/frontend/src/routes/devices.$id.tsx b/frontend/src/routes/devices.$id.tsx
index 0ef4e815..68f81602 100644
--- a/frontend/src/routes/devices.$id.tsx
+++ b/frontend/src/routes/devices.$id.tsx
@@ -16,6 +16,7 @@ import { createFileRoute, notFound, redirect } from "@tanstack/react-router";
 import { Alert } from "@vector-im/compound-web";
 import { useTranslation } from "react-i18next";
 
+import Layout from "../components/Layout";
 import { Link } from "../components/Link";
 import { graphql } from "../gql";
 
@@ -79,12 +80,14 @@ function NotFound(): React.ReactElement {
   const { t } = useTranslation();
   const { id: deviceId } = Route.useParams();
   return (
-    <Alert
-      type="critical"
-      title={t("frontend.session_detail.alert.title", { deviceId })}
-    >
-      {t("frontend.session_detail.alert.text")}
-      <Link to="/sessions">{t("frontend.session_detail.alert.button")}</Link>
-    </Alert>
+    <Layout>
+      <Alert
+        type="critical"
+        title={t("frontend.session_detail.alert.title", { deviceId })}
+      >
+        {t("frontend.session_detail.alert.text")}
+        <Link to="/sessions">{t("frontend.session_detail.alert.button")}</Link>
+      </Alert>
+    </Layout>
   );
 }
diff --git a/frontend/src/routes/emails.$id.verify.tsx b/frontend/src/routes/emails.$id.verify.tsx
index 866f1054..ebabce6f 100644
--- a/frontend/src/routes/emails.$id.verify.tsx
+++ b/frontend/src/routes/emails.$id.verify.tsx
@@ -15,6 +15,7 @@
 import { createFileRoute, notFound } from "@tanstack/react-router";
 import { useQuery } from "urql";
 
+import Layout from "../components/Layout";
 import VerifyEmailComponent from "../components/VerifyEmail";
 import { graphql } from "../gql";
 
@@ -50,5 +51,9 @@ function EmailVerify(): React.ReactElement {
   const email = result.data?.userEmail;
   if (email == null) throw notFound();
 
-  return <VerifyEmailComponent email={email} />;
+  return (
+    <Layout>
+      <VerifyEmailComponent email={email} />
+    </Layout>
+  );
 }
diff --git a/frontend/src/routes/reset-cross-signing.tsx b/frontend/src/routes/reset-cross-signing.tsx
index a88f740f..bab3f514 100644
--- a/frontend/src/routes/reset-cross-signing.tsx
+++ b/frontend/src/routes/reset-cross-signing.tsx
@@ -22,6 +22,7 @@ import { z } from "zod";
 
 import BlockList from "../components/BlockList";
 import { ButtonLink } from "../components/ButtonLink";
+import Layout from "../components/Layout";
 import LoadingSpinner from "../components/LoadingSpinner";
 import PageHeading from "../components/PageHeading";
 import { graphql } from "../gql";
@@ -84,56 +85,58 @@ function ResetCrossSigning(): React.ReactNode {
   };
 
   return (
-    <BlockList>
-      <PageHeading
-        Icon={IconKey}
-        title={t("frontend.reset_cross_signing.heading")}
-        invalid
-      />
+    <Layout>
+      <BlockList>
+        <PageHeading
+          Icon={IconKey}
+          title={t("frontend.reset_cross_signing.heading")}
+          invalid
+        />
 
-      {!result.data && !result.error && (
-        <>
-          <Text className="text-justify">
-            {t("frontend.reset_cross_signing.description")}
-          </Text>
-          <Button
-            kind="primary"
-            destructive
-            disabled={result.fetching}
-            onClick={onClick}
+        {!result.data && !result.error && (
+          <>
+            <Text className="text-justify">
+              {t("frontend.reset_cross_signing.description")}
+            </Text>
+            <Button
+              kind="primary"
+              destructive
+              disabled={result.fetching}
+              onClick={onClick}
+            >
+              {!!result.fetching && <LoadingSpinner inline />}
+              {t("frontend.reset_cross_signing.button")}
+            </Button>
+          </>
+        )}
+        {result.data && (
+          <Alert
+            type="info"
+            title={t("frontend.reset_cross_signing.success.title")}
           >
-            {!!result.fetching && <LoadingSpinner inline />}
-            {t("frontend.reset_cross_signing.button")}
-          </Button>
-        </>
-      )}
-      {result.data && (
-        <Alert
-          type="info"
-          title={t("frontend.reset_cross_signing.success.title")}
-        >
-          {t("frontend.reset_cross_signing.success.description")}
-        </Alert>
-      )}
-      {result.error && (
-        <Alert
-          type="critical"
-          title={t("frontend.reset_cross_signing.failure.title")}
-        >
-          {t("frontend.reset_cross_signing.failure.description")}
-        </Alert>
-      )}
+            {t("frontend.reset_cross_signing.success.description")}
+          </Alert>
+        )}
+        {result.error && (
+          <Alert
+            type="critical"
+            title={t("frontend.reset_cross_signing.failure.title")}
+          >
+            {t("frontend.reset_cross_signing.failure.description")}
+          </Alert>
+        )}
 
-      {!deepLink && (
-        <ButtonLink
-          to=".."
-          from={Route.fullPath}
-          kind="tertiary"
-          Icon={IconArrowLeft}
-        >
-          {t("action.back")}
-        </ButtonLink>
-      )}
-    </BlockList>
+        {!deepLink && (
+          <ButtonLink
+            to=".."
+            from={Route.fullPath}
+            kind="tertiary"
+            Icon={IconArrowLeft}
+          >
+            {t("action.back")}
+          </ButtonLink>
+        )}
+      </BlockList>
+    </Layout>
   );
 }