fix(web): header wrapping

PHS-TSA · Dec 17, 2023 · 08b1960 · 08b1960
1 parent a44984f
commit 08b1960
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 3 deletions.
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -42,7 +42,7 @@ const Header: FunctionalComponent<Props> = ({ active }: Props) => {
           Why Switch?
         </div>
       </a>
-      <ul class="flex items-center gap-6">
+      <ul class="flex flex-row flex-wrap items-center gap-6">
         {menus.map((menu) => (
           <li>
             <HeaderMenu

diff --git a/src/islands/HeaderMenu.tsx b/src/islands/HeaderMenu.tsx
@@ -27,8 +27,12 @@ const HeaderMenu: FunctionalComponent<Props> = (
       <Menu>
         <Menu.Button class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 py-1 border-gray-500 dark:border-gray-400">
           <span class="flex flex-row">
-            <span class={active ? "font-bold border-b-2" : ""}>{title}</span>
-            {" "}
+            <span
+              class={"whitespace-nowrap" +
+                (active ? "font-bold border-b-2" : "")}
+            >
+              {title}
+            </span>{" "}
             <IconChevronDown />
           </span>
         </Menu.Button>