Merge pull request #2750 from appwrite/fix-ipad-nav-spacing-and-fix-customers-page

Fix: iPad navbar spacing and CTA and customers page

Author: HarshMN2345

src/markdoc/layouts/Category.svelte

@@ -38,19 +38,17 @@
 </svelte:head>
 
 <Main>
-    <div class="pt-10">
-        <div class="web-big-padding-section-level-2">
+    <div class="pt-6">
+        <div class="web-big-padding-section-level-2 web-category-page">
             <div class="container">
-                <a class="web-link web-u-color-text-secondary items-baseline" href="/blog">
-                    <span class="web-icon-chevron-left" aria-hidden="true"></span>
-                    <span>Back to blog</span>
-                </a>
-                <div class="web-category-header mt-6">
-                    <div class="flex flex-col justify-between gap-6 md:flex-row md:items-center">
-                        <h1 class="text-display font-aeonik-pro text-primary">
+                <div class="web-category-header">
+                    <div class="web-category-header-content">
+                        <h1
+                            class="web-category-header-title text-display font-aeonik-pro text-primary"
+                        >
                             {name}
                         </h1>
-                        <p class="text-secondary text-description">
+                        <p class="web-category-header-description text-secondary text-description">
                             {description}
                         </p>
                     </div>
@@ -77,13 +75,13 @@
                         {/each}
                     </ul>
                 </div>
-                <div class="relative overflow-hidden pt-[7.5rem]">
-                    <div class="container">
-                        <FooterNav />
-                        <MainFooter />
-                    </div>
+            </div>
+            <div class="relative mt-0 overflow-hidden">
+                <div class="container">
+                    <FooterNav />
+                    <MainFooter />
                 </div>
             </div>
         </div>
-    </div></Main
->
+    </div>
+</Main>

src/scss/7-components/_main-header.scss

@@ -100,8 +100,45 @@
         --p-main-header-border-color: rgb(0, 0, 0, 0.1);
     }
 
-    @media  #{$break2} {
-        display: none;
+    @media #{$break2} {
+        --p-main-header-padding-block: #{pxToRem(10)};
+
+        padding-inline: pxToRem(20);
+
+        .#{$p}-main-header-wrapper {
+            gap: pxToRem(12);
+        }
+
+        .#{$p}-main-header-nav {
+            font-size: pxToRem(15);
+        }
+
+        .#{$p}-main-header-nav-list {
+            gap: pxToRem(20);
+        }
+
+        .#{$p}-main-header-end {
+            gap: pxToRem(6);
+        }
+
+        .web-logo {
+            margin-inline-end: pxToRem(24);
+        }
+
+        .#{$p}-inline-tag {
+            display: none;
+        }
+
+        .#{$p}-button {
+            min-block-size: pxToRem(36);
+            padding-inline: pxToRem(12);
+            font-size: pxToRem(14);
+        }
+
+        .web-main-header-cta {
+            .cta-full { display: none; }
+            .cta-short { display: inline; }
+        }
     }
 
     @media  #{$break1} {

src/scss/7-components/_mobile-header.scss

@@ -29,7 +29,7 @@
         -webkit-backdrop-filter: blur(pxToRem(8));
         backdrop-filter: blur(pxToRem(8));
     }
-    @media #{$break3open} {
+    @media #{$break2open} {
         display: none;
     }
 

src/scss/8-sequences/_category-header.scss

@@ -2,15 +2,25 @@
 
 .#{$p}-category-header {
   display:flex; flex-direction:column;
-  &-content { display:flex; gap:pxToRem(24); }
-  &-description { max-inline-size:pxToRem(892); }
+  &-content { display:flex; flex-direction:column; gap:pxToRem(12); align-items:flex-start; }
+  &-title { max-inline-size:100%; text-wrap:balance; margin:0; }
+  &-description { max-inline-size:pxToRem(640); margin:0; }
 
   @media #{$break1} {
-    &-content { flex-direction:column; }
     .#{$p}-input-text-search-wrapper { margin-block-start:pxToRem(24); }
   }
-  @media #{$break2open} {
+  @media #{$break4open} {
+    &-content { flex-direction:row; align-items:flex-start; }
+    &-title { flex:1 1 auto; white-space:nowrap; }
+    &-description { flex:0 0 pxToRem(520); padding-block-start:pxToRem(10); }
+  }
+  @media #{$break4open} {
     &-content { justify-content:space-between; }
     .#{$p}-input-text-search-wrapper { align-self:end; margin-block-start:pxToRem(40); }
   }
-}
+}
+
+.#{$p}-category-page {
+  margin-block-end:0;
+  padding-block-end:0;
+}