From cac9d67e55baecf3b4b0c71e2e8fa249e29f0e05 Mon Sep 17 00:00:00 2001
From: Quentin Gliech <quenting@element.io>
Date: Wed, 8 Jan 2025 15:24:59 +0100
Subject: [PATCH] Adjust layout spacings

---
 .../src/components/Layout/Layout.module.css   |  15 +-
 .../PageHeading/PageHeading.module.css        |   8 +-
 frontend/src/routes/_account.lazy.tsx         |  20 ++-
 .../account/__snapshots__/index.test.tsx.snap | 162 +++++++++---------
 4 files changed, 109 insertions(+), 96 deletions(-)

diff --git a/frontend/src/components/Layout/Layout.module.css b/frontend/src/components/Layout/Layout.module.css
index 79347e4db..04f36211e 100644
--- a/frontend/src/components/Layout/Layout.module.css
+++ b/frontend/src/components/Layout/Layout.module.css
@@ -6,33 +6,34 @@
  */
 
 .layout-container {
+  --target-width: 378px;
+  --inline-padding: var(--cpd-space-4x);
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
 
-  max-width: calc(378px + var(--cpd-space-5x) * 2);
+  max-width: calc(var(--target-width) + var(--inline-padding) * 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);
+  padding-inline: var(--inline-padding);
+  padding-block: var(--cpd-space-8x);
   gap: var(--cpd-space-8x);
 
   &.consent {
-    max-width: calc(460px + var(--cpd-space-5x) * 2);
+    --target-width: 460px;
   }
 
   &.wide {
-    max-width: calc(520px + var(--cpd-space-5x) * 2);
+    --target-width: 520px;
   }
 }
 
 @media screen and (min-width: 768px) {
   .layout-container {
-    padding-block-start: var(--cpd-space-20x);
-    padding-block-end: var(--cpd-space-10x);
+    padding-block: var(--cpd-space-12x);
   }
 }
diff --git a/frontend/src/components/PageHeading/PageHeading.module.css b/frontend/src/components/PageHeading/PageHeading.module.css
index 3ce16f96b..ade452a86 100644
--- a/frontend/src/components/PageHeading/PageHeading.module.css
+++ b/frontend/src/components/PageHeading/PageHeading.module.css
@@ -10,7 +10,7 @@
   flex-direction: column;
   gap: var(--cpd-space-4x);
 
-  /* Layout already has 6x padding, and we need 10x */
+  /* Layout already has 8x/12x padding, and we need 12x/20x */
   margin-block-start: var(--cpd-space-4x);
 
   & .icon {
@@ -74,3 +74,9 @@
     }
   }
 }
+
+@media screen and (min-width: 768px) {
+  .layout-container {
+    margin-block-start: var(--cpd-space-8x);
+  }
+}
diff --git a/frontend/src/routes/_account.lazy.tsx b/frontend/src/routes/_account.lazy.tsx
index 698755cc4..d5390874d 100644
--- a/frontend/src/routes/_account.lazy.tsx
+++ b/frontend/src/routes/_account.lazy.tsx
@@ -33,23 +33,25 @@ function Account(): React.ReactElement {
 
   return (
     <Layout wide>
-      <div className="flex flex-col gap-4">
-        <header className="flex justify-between mb-4">
-          <Heading size="lg" weight="semibold">
+      <div className="flex flex-col gap-10">
+        <header className="flex justify-between items-center">
+          <Heading size="md" weight="semibold">
             {t("frontend.account.title")}
           </Heading>
 
           <EndSessionButton endSession={onSessionEnd} />
         </header>
 
-        <UserGreeting user={session.user} siteConfig={siteConfig} />
+        <div className="flex flex-col gap-4">
+          <UserGreeting user={session.user} siteConfig={siteConfig} />
 
-        <UnverifiedEmailAlert user={session.user} />
+          <UnverifiedEmailAlert user={session.user} />
 
-        <NavBar>
-          <NavItem to="/">{t("frontend.nav.settings")}</NavItem>
-          <NavItem to="/sessions">{t("frontend.nav.devices")}</NavItem>
-        </NavBar>
+          <NavBar>
+            <NavItem to="/">{t("frontend.nav.settings")}</NavItem>
+            <NavItem to="/sessions">{t("frontend.nav.devices")}</NavItem>
+          </NavBar>
+        </div>
       </div>
 
       <Outlet />
diff --git a/frontend/tests/routes/account/__snapshots__/index.test.tsx.snap b/frontend/tests/routes/account/__snapshots__/index.test.tsx.snap
index 0350f7ff9..7bbdb9738 100644
--- a/frontend/tests/routes/account/__snapshots__/index.test.tsx.snap
+++ b/frontend/tests/routes/account/__snapshots__/index.test.tsx.snap
@@ -298,13 +298,13 @@ exports[`Account home page > renders the page 1`] = `
     class="_layoutContainer_0c8bf9 _wide_0c8bf9"
   >
     <div
-      class="flex flex-col gap-4"
+      class="flex flex-col gap-10"
     >
       <header
-        class="flex justify-between mb-4"
+        class="flex justify-between items-center"
       >
         <h1
-          class="_typography_yh5dq_162 _font-heading-lg-semibold_yh5dq_135"
+          class="_typography_yh5dq_162 _font-heading-md-semibold_yh5dq_121"
         >
           Your account
         </h1>
@@ -336,94 +336,98 @@ exports[`Account home page > renders the page 1`] = `
         </button>
       </header>
       <div
-        class="_user_66f22a"
+        class="flex flex-col gap-4"
       >
-        <span
-          aria-label="@alice:example.com"
-          class="_avatar_mcap2_17 _avatar_66f22a _avatar-imageless_mcap2_61"
-          data-color="6"
-          data-type="round"
-          role="img"
-          style="--cpd-avatar-size: var(--cpd-space-14x);"
-        >
-          A
-        </span>
         <div
-          class="_meta_66f22a"
+          class="_user_66f22a"
         >
-          <p
-            class="_typography_yh5dq_162 _font-body-lg-semibold_yh5dq_83"
+          <span
+            aria-label="@alice:example.com"
+            class="_avatar_mcap2_17 _avatar_66f22a _avatar-imageless_mcap2_61"
+            data-color="6"
+            data-type="round"
+            role="img"
+            style="--cpd-avatar-size: var(--cpd-space-14x);"
           >
-            Alice
-          </p>
-          <p
-            class="_typography_yh5dq_162 _font-body-md-regular_yh5dq_59 _mxid_66f22a"
-          >
-            @alice:example.com
-          </p>
-        </div>
-        <button
-          aria-controls="radix-:r3:"
-          aria-expanded="false"
-          aria-haspopup="dialog"
-          aria-labelledby=":r6:"
-          class="_icon-button_bh2qc_17 _editButton_66f22a"
-          data-state="closed"
-          role="button"
-          style="--cpd-icon-button-size: var(--cpd-space-6x);"
-          tabindex="0"
-          type="button"
-        >
+            A
+          </span>
           <div
-            class="_indicator-icon_133tf_26"
-            style="--cpd-icon-button-size: 100%;"
+            class="_meta_66f22a"
           >
-            <svg
-              fill="currentColor"
-              height="1em"
-              viewBox="0 0 24 24"
-              width="1em"
-              xmlns="http://www.w3.org/2000/svg"
+            <p
+              class="_typography_yh5dq_162 _font-body-lg-semibold_yh5dq_83"
             >
-              <path
-                clip-rule="evenodd"
-                d="M15.706 2.637a2 2 0 0 1 2.829 0l2.828 2.828a2 2 0 0 1 0 2.829L9.605 20.052a1 1 0 0 1-.465.263L3.483 21.73a1 1 0 0 1-1.212-1.212l1.414-5.657a1 1 0 0 1 .263-.465L15.706 2.637Zm1.224 7.262L14.102 7.07l-8.544 8.544-.943 3.77 3.771-.942L16.93 9.9Z"
-                fill-rule="evenodd"
-              />
-            </svg>
+              Alice
+            </p>
+            <p
+              class="_typography_yh5dq_162 _font-body-md-regular_yh5dq_59 _mxid_66f22a"
+            >
+              @alice:example.com
+            </p>
           </div>
-        </button>
-      </div>
-      <nav
-        class="_navBar_214497"
-      >
-        <ul
-          class="_navBarItems_214497"
-        >
-          <li
-            class="_navTab_8603fc"
+          <button
+            aria-controls="radix-:r3:"
+            aria-expanded="false"
+            aria-haspopup="dialog"
+            aria-labelledby=":r6:"
+            class="_icon-button_bh2qc_17 _editButton_66f22a"
+            data-state="closed"
+            role="button"
+            style="--cpd-icon-button-size: var(--cpd-space-6x);"
+            tabindex="0"
+            type="button"
           >
-            <a
-              aria-current="page"
-              class="_navItem_8603fc"
-              data-status="active"
-              href="/"
+            <div
+              class="_indicator-icon_133tf_26"
+              style="--cpd-icon-button-size: 100%;"
             >
-              Settings
-            </a>
-          </li>
-          <li
-            class="_navTab_8603fc"
+              <svg
+                fill="currentColor"
+                height="1em"
+                viewBox="0 0 24 24"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  clip-rule="evenodd"
+                  d="M15.706 2.637a2 2 0 0 1 2.829 0l2.828 2.828a2 2 0 0 1 0 2.829L9.605 20.052a1 1 0 0 1-.465.263L3.483 21.73a1 1 0 0 1-1.212-1.212l1.414-5.657a1 1 0 0 1 .263-.465L15.706 2.637Zm1.224 7.262L14.102 7.07l-8.544 8.544-.943 3.77 3.771-.942L16.93 9.9Z"
+                  fill-rule="evenodd"
+                />
+              </svg>
+            </div>
+          </button>
+        </div>
+        <nav
+          class="_navBar_214497"
+        >
+          <ul
+            class="_navBarItems_214497"
           >
-            <a
-              class="_navItem_8603fc"
-              href="/sessions"
+            <li
+              class="_navTab_8603fc"
             >
-              Devices
-            </a>
-          </li>
-        </ul>
-      </nav>
+              <a
+                aria-current="page"
+                class="_navItem_8603fc"
+                data-status="active"
+                href="/"
+              >
+                Settings
+              </a>
+            </li>
+            <li
+              class="_navTab_8603fc"
+            >
+              <a
+                class="_navItem_8603fc"
+                href="/sessions"
+              >
+                Devices
+              </a>
+            </li>
+          </ul>
+        </nav>
+      </div>
     </div>
     <div
       class="flex flex-col gap-4 mb-4"