From b4c3462bd831c243b87e9edfdc57f41940098721 Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Tue, 2 May 2023 10:39:51 +0100
Subject: [PATCH] refactor: small design review changes

---
 src/lib/layout/notifications.svelte   |  8 ++++++++
 src/lib/layout/unauthenticated.svelte | 19 ++++++++++---------
 src/routes/card/[uid]/+page.svelte    |  4 ++--
 3 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/src/lib/layout/notifications.svelte b/src/lib/layout/notifications.svelte
index 2027027997..b5ea496b59 100644
--- a/src/lib/layout/notifications.svelte
+++ b/src/lib/layout/notifications.svelte
@@ -26,4 +26,12 @@
         right: 24px;
         z-index: 1000;
     }
+
+    @media (max-width: 512px) {
+        section {
+            top: calc(var(--main-header-height) + 16px);
+            right: 16px;
+            left: 16px;
+        }
+    }
 </style>
diff --git a/src/lib/layout/unauthenticated.svelte b/src/lib/layout/unauthenticated.svelte
index 4dfb7117c0..3bf57ab5cb 100644
--- a/src/lib/layout/unauthenticated.svelte
+++ b/src/lib/layout/unauthenticated.svelte
@@ -146,9 +146,7 @@
         class:is-cloud={isCloud}
         style:--url={`url(${AppwriteCloudBg})`}
         style:--url-mobile={`url(${AppwriteCloudBgMobile})`}>
-        <div
-            class="container u-flex u-flex-vertical u-cross-center full-height"
-            class:cloud-contents={isCloud}>
+        <div class="container u-flex u-flex-vertical u-cross-center" class:cloud-contents={isCloud}>
             {#if isCloud}
                 <a class="mobile-logo is-only-mobile" href={user ? '/console' : '/'}>
                     <img
@@ -185,6 +183,10 @@
 </main>
 
 <style lang="scss">
+    :global(body) {
+        --main-header-height: 0px !important;
+    }
+
     @media (prefers-reduced-motion: reduce) {
         main * {
             animation: none !important;
@@ -203,11 +205,6 @@
         }
     }
 
-    .full-height {
-        block-size: 100vh;
-        block-size: 100lvh;
-    }
-
     .cloud-section {
         background: var(--url);
         background-repeat: no-repeat;
@@ -282,7 +279,7 @@
     }
 
     .mobile-logo {
-        margin-block-start: 3rem;
+        margin-block-start: 1rem;
         margin-block-end: 0.5rem;
     }
 
@@ -345,6 +342,10 @@
         .cloud-section {
             display: none;
         }
+
+        section:last-child {
+            padding-block-end: 32px;
+        }
     }
 
     @media (min-width: 530px) and (max-width: 767px) {
diff --git a/src/routes/card/[uid]/+page.svelte b/src/routes/card/[uid]/+page.svelte
index 4e865df7dc..67aa186585 100644
--- a/src/routes/card/[uid]/+page.svelte
+++ b/src/routes/card/[uid]/+page.svelte
@@ -83,7 +83,7 @@
 
 <div class="wrapper">
     <div class="card">
-        <h3 class="heading-level-3 u-flex u-cross-center u-gap-8 no-text-select">
+        <h3 class="heading-level-3 no-text-select">
             {title}
             <button class="confetti-btn" on:click={() => triggerConfettiKey++}>
                 🎉
@@ -390,7 +390,7 @@
     .confetti-btn {
         animation: shake 2000ms ease infinite;
         user-select: none;
-        display: grid;
+        display: inline-flex;
         place-items: center;
         position: relative;