From 128c89c067deb195215f5f198d6bd325a606a8c0 Mon Sep 17 00:00:00 2001
From: Eli <88557639+lishaduck@users.noreply.github.com>
Date: Thu, 9 May 2024 12:59:42 -0500
Subject: [PATCH] fix: header wrapping

---
 src/components/Header.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index e0417650..c68dd942 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -28,9 +28,9 @@ export interface HeaderProps {
  */
 export function Header({ active }: HeaderProps): JSX.Element {
   return (
-    <header class="max-w-screen-xlg flex w-full flex-col gap-4 bg-slate-50 px-8 py-6 sm:flex-row dark:bg-slate-950">
+    <header class="max-w-screen-xlg flex w-full flex-col flex-wrap gap-4 bg-slate-50 px-8 py-6 sm:flex-row dark:bg-slate-950">
       <HomeLink />
-      <ul class="flex flex-row flex-wrap items-center gap-6">
+      <ul class="flex flex-shrink flex-row flex-wrap items-center gap-6">
         {menus.map((menu: Menu) => (
           <li key={menu.title} class="flex h-8 flex-row items-end">
             <HeaderMenu {...menu} active={active.startsWith(menu.url)} />
@@ -56,7 +56,7 @@ export function Header({ active }: HeaderProps): JSX.Element {
 function HomeLink(): JSX.Element {
   return (
     <a
-      class="flex flex-1 flex-row items-center text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
+      class="flex flex-shrink-0 flex-grow flex-row items-center text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
       href="/"
     >
       <Logo aria-hidden="true" class="size-10" />