Merge pull request #2670 from appwrite/fix-sidebar-in-mobile-view-and-banner-for-small-devices

fix: improve banner mobile responsiveness and remove unused sidebar calculations

Author: HarshMN2345

src/lib/components/MobileNav.svelte

@@ -4,53 +4,28 @@
     import { SOCIAL_STATS } from '$lib/constants';
     import type { NavLink } from './MainNav.svelte';
     import { getAppwriteDashboardUrl } from '$lib/utils/dashboard';
-    import { Button, InlineTag, Icon } from '$lib/components/ui';
+    import { Button } from '$lib/components/ui';
     import { GithubStats } from '$lib/components/shared';
     import { trackEvent } from '$lib/actions/analytics';
     import { browser } from '$app/environment';
-    import { onMount } from 'svelte';
 
     export let open = false;
     export let links: NavLink[];
     export let offerButton = false;
 
-    let bannerHeight = 0;
-    let banner: HTMLElement | null = null;
-
     afterNavigate(() => {
         open = false;
         document.body.style.overflow = '';
     });
-
-    function getBannerElement() {
-        if (banner !== null) return banner;
-
-        banner = document.getElementById('top-banner');
-        return banner;
-    }
-
-    function updateBannerHeight() {
-        if (browser) {
-            const bannerElement = getBannerElement();
-            bannerHeight = bannerElement ? bannerElement.getBoundingClientRect().height : 0;
-        }
-    }
-
-    onMount(updateBannerHeight);
 </script>
 
 <svelte:window
     on:resize={() => {
         open && (open = false);
-        updateBannerHeight();
     }}
 />
 
-<nav
-    class="web-side-nav sticky block max-h-screen overflow-hidden lg:hidden"
-    class:hidden={!open}
-    style:top="calc(73px + {bannerHeight}px)"
->
+<nav class="web-side-nav sticky block max-h-screen overflow-hidden lg:hidden" class:hidden={!open}>
     <div class="web-side-nav-wrapper ps-4 pe-4">
         <div class="flex items-center gap-2 px-4">
             {#if offerButton}

src/routes/(marketing)/(components)/teaser/teaser-banner.svelte

@@ -103,8 +103,9 @@
 
 <style>
     .banner-container {
-        width: 360px;
-        height: 110px;
+        width: 100%;
+        min-height: auto;
+        max-width: 100%;
     }
 
     @media (min-width: 640px) {
@@ -121,7 +122,7 @@
 
     .banner-text-introducing {
         font-family: 'Neue Haas Grotesk Display Pro', Inter, sans-serif;
-        font-size: 20px;
+        font-size: 18px;
         font-style: normal;
         font-weight: 450;
         line-height: 106%;
@@ -133,6 +134,12 @@
         white-space: nowrap;
     }
 
+    @media (min-width: 375px) {
+        .banner-text-introducing {
+            font-size: 20px;
+        }
+    }
+
     @media (min-width: 640px) {
         .banner-text-introducing {
             font-size: 18px;
@@ -148,13 +155,20 @@
     .banner-text-right {
         color: var(--primary, #e4e4e7);
         font-family: Inter, sans-serif;
-        font-size: 16px;
+        font-size: 14px;
         font-weight: 400;
-        line-height: 22px;
+        line-height: 20px;
         letter-spacing: -0.072px;
         white-space: nowrap;
     }
 
+    @media (min-width: 375px) {
+        .banner-text-right {
+            font-size: 16px;
+            line-height: 22px;
+        }
+    }
+
     @media (min-width: 640px) {
         .banner-text-right {
             font-size: 15px;
@@ -171,15 +185,22 @@
 
     .logo-container {
         display: flex;
-        width: 143.384px;
-        height: 35.785px;
+        width: 120px;
+        height: 30px;
         padding: 1.348px 0.634px 1.348px 0;
         justify-content: center;
         align-items: flex-end;
         gap: 10.75px;
         flex-shrink: 0;
     }
 
+    @media (min-width: 375px) {
+        .logo-container {
+            width: 143.384px;
+            height: 35.785px;
+        }
+    }
+
     @media (min-width: 640px) {
         .logo-container {
             width: 120px;