Merge pull request #53 from PHS-TSA/fix-header

Fix Header Wrapping
PHS-TSA · May 9, 2024 · e01b6b8 · e01b6b8
2 parents ad9419c + 128c89c
commit e01b6b8
Showing 1 changed file with 3 additions and 3 deletions.
diff --git 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" />