Fix header spacing so "Docs" displays correctly

Author: FireGiantDocs

astro.config.mjs

@@ -45,6 +45,7 @@ export default defineConfig({
       components: {
         // Override the default `Head` component to add our page tracking.
         Head: './src/components/starlight/Head.astro',
+        Header: './src/components/starlight/Header.astro',
         // Boost schema reference pages in Pagefind results.
         MarkdownContent: './src/components/starlight/MarkdownContent.astro',
         PageTitle: './src/components/starlight/PageTitle.astro',

src/components/starlight/Header.astro

@@ -0,0 +1,88 @@
+---
+import config from 'virtual:starlight/user-config';
+
+import LanguageSelect from 'virtual:starlight/components/LanguageSelect';
+import Search from 'virtual:starlight/components/Search';
+import SiteTitle from 'virtual:starlight/components/SiteTitle';
+import SocialIcons from 'virtual:starlight/components/SocialIcons';
+import ThemeSelect from 'virtual:starlight/components/ThemeSelect';
+
+const shouldRenderSearch =
+  config.pagefind || config.components.Search !== '@astrojs/starlight/components/Search.astro';
+---
+
+<div class="fg-header">
+  <div class="fg-title sl-flex">
+    <SiteTitle />
+  </div>
+  <div class="fg-search sl-flex print:hidden">
+    {shouldRenderSearch && <Search class="fg-search-control" />}
+  </div>
+  <div class="fg-right sl-hidden md:sl-flex print:hidden">
+    <div class="fg-social sl-flex">
+      <SocialIcons />
+    </div>
+    <ThemeSelect />
+    <LanguageSelect />
+  </div>
+</div>
+
+<style>
+  .fg-header {
+    display: flex;
+    align-items: center;
+    gap: var(--sl-nav-gap);
+    min-width: 0;
+    width: 100%;
+  }
+
+  .fg-title {
+    flex: 0 0 auto;
+    min-width: max-content;
+    overflow: visible;
+  }
+
+  .fg-search {
+    flex: 1 1 16rem;
+    min-width: 0;
+  }
+
+  .fg-search :global(site-search) {
+    display: block;
+    width: 100%;
+  }
+
+  .fg-search :global(button[data-open-modal]) {
+    max-width: 22rem;
+  }
+
+  .fg-right,
+  .fg-social {
+    align-items: center;
+    gap: 1rem;
+  }
+
+  .fg-right {
+    flex: 0 0 auto;
+    margin-inline-start: auto;
+    min-width: max-content;
+  }
+
+  .fg-social::after {
+    content: '';
+    height: 2rem;
+    border-inline-end: 1px solid var(--sl-color-gray-5);
+  }
+
+  @media (max-width: 63.999rem) {
+    .fg-search {
+      flex-basis: 14rem;
+    }
+  }
+
+  @media (max-width: 50rem) {
+    .fg-search :global(button[data-open-modal]) {
+      max-width: 100%;
+    }
+  }
+</style>

src/components/starlight/SiteTitle.astro

@@ -14,14 +14,24 @@ const docsHref = 'https://docs.firegiant.com/';
 
 <style>
   .site-title {
+    --logo-height: calc(var(--sl-nav-height) - 2 * var(--sl-nav-pad-y));
+    align-items: center;
     gap: 1rem;
+    min-width: max-content;
+    flex-shrink: 0;
+    white-space: nowrap;
   }
+
   .site-title a {
     display: flex;
+    align-items: center;
+    flex-shrink: 0;
   }
+
   .firegiant-logo {
     color: var(--sl-color-white);
   }
+
   .docs-logo {
     color: var(--sl-color-text-accent);
   }
@@ -37,15 +47,22 @@ const docsHref = 'https://docs.firegiant.com/';
   }
   /* Adjust svg sizes to full nav height */
   .site-title :global(svg) {
-    --display-height: 1.75rem;
-    /* `auto` ensures the `<svg>` scales down on really narrow viewports */
+    display: block;
     width: auto;
-    height: auto;
-    margin-block: calc((var(--sl-nav-height) - var(--display-height)) / 2);
+    height: var(--logo-height);
+    max-width: none;
     transition: transform 0.18s cubic-bezier(0.23, 1, 0.32, 1);
   }
+
   .site-title a:hover :global(svg) {
     --hover-offset: 0.15rem;
     transform: translateY(calc(var(--hover-offset) * -1));
   }
+
+  @media (max-width: 64rem) {
+    .site-title {
+      --logo-height: 1.625rem;
+      gap: 0.75rem;
+    }
+  }
 </style>

src/styles/custom.css

@@ -60,7 +60,6 @@ body {
   font-family: Plex, var(--__sl-font);
 }
 
-
 /* Home
 ============================= */