Fix header size for tablet edge case

Author: ysthakur

src/components/header/HomeLink.astro

@@ -45,8 +45,20 @@ import Logo from "../Logo.astro";
     height: 40px;
   }
 
-  // For tablets and up
+  // For tablets
   @media (min-width: $tabletMinWidth) {
+    .site-title {
+      font-size: 1.6rem;
+    }
+
+    :global(.site-title-link > svg) {
+      width: 50px;
+      height: 50px;
+    }
+  }
+
+  // For laptops
+  @media (min-width: $laptopMinWidth) {
     .site-title {
       font-size: xx-large;
     }

src/components/header/mobile/Menu.astro

@@ -13,7 +13,7 @@ import PageLink from "./PageLink.astro";
     <div id="theme-row" class="dropdown-item">
       <label for="theme">Theme:</label>
       <select name="theme" id="theme-select">
-        {themes.map(({ name, theme }) => <option value={theme}>{name}</option>)}
+        {themes.map(({ name, theme }) => <option value={theme ?? "Sync"}>{name}</option>)}
       </select>
     </div>
   </div>
@@ -43,7 +43,7 @@ import PageLink from "./PageLink.astro";
   document
     .getElementById("theme-select")!
     .addEventListener("change", (e: any) => {
-      setTheme(e.currentTarget.value);
+      setTheme(e.currentTarget.value === "Sync" ? null : e.currentTarget.value);
     });
 </script>
 

src/components/header/tablet/Menu.astro

@@ -20,7 +20,11 @@ const { title, isBlogPost } = Astro.props;
 
 <div id="laptop-header" class="header">
   <nav class="menu">
-    {PAGES.map((page) => <MenuItem curr={title} isBlogPost={isBlogPost} {...page} />)}
+    {
+      PAGES.map((page) => (
+        <MenuItem curr={title} isBlogPost={isBlogPost} {...page} />
+      ))
+    }
   </nav>
   <div class="text-start social-media-icons">
     {
@@ -39,23 +43,29 @@ const { title, isBlogPost } = Astro.props;
   @import "../../../styles/common.scss";
 
   #laptop-header {
-    display: flex;
+    display: none;
+
+    @media (min-width: $tabletMinWidth) {
+      display: flex;
+    }
+  }
+
+  #laptop-header {
     margin-left: auto;
     flex-direction: row;
     align-items: center;
     gap: 1.7rem;
   }
 
-  @media (max-width: ($tabletMinWidth - 1)) {
-    #laptop-header {
-      display: none;
-    }
-  }
-
   .menu {
     display: inline-flex;
     margin-left: auto;
-    gap: 1rem;
+
+    gap: 1.5ch;
+
+    @media (min-width: $laptopMinWidth) {
+      gap: 2ch;
+    }
   }
 
   .social-media-icons {

src/layouts/BaseLayout.astro

@@ -52,13 +52,13 @@ if (!title && frontmatter && "title" in frontmatter) {
   }
 
   body > header {
-    // Padding for very small screens (phones in portrait orientation)
+    // Less padding for phones and tablets
     padding-left: 5vw;
     padding-right: 5vw;
 
     @media (min-width: $laptopMinWidth) {
-      padding-left: 4vw;
-      padding-right: 4vw;
+      padding-left: 8vw;
+      padding-right: 8vw;
     }
   }