From a3310f09f324054f1838166289b996c6dce68dd3 Mon Sep 17 00:00:00 2001
From: Kara Sune <sunebarikara@gmail.com>
Date: Fri, 2 Jan 2026 08:34:59 +0100
Subject: [PATCH] fix: horizontal scrolling in top navigation

---
 apps/www/components/ex-header.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/www/components/ex-header.tsx b/apps/www/components/ex-header.tsx
index c5b3b1d..46eb791 100644
--- a/apps/www/components/ex-header.tsx
+++ b/apps/www/components/ex-header.tsx
@@ -38,14 +38,14 @@ export const ExampleHeeader = () => {
                             </button>
                         </div>
 
-                        <div className="bg-background in-data-[state=active]:block lg:in-data-[state=active]:flex mb-6 hidden w-full flex-wrap items-center justify-end space-y-8 rounded-3xl border p-6 shadow-2xl shadow-zinc-300/20 md:flex-nowrap lg:m-0 lg:flex lg:w-fit lg:gap-6 lg:space-y-0 lg:border-transparent lg:bg-transparent lg:p-0 lg:shadow-none dark:shadow-none dark:lg:bg-transparent">
-                            <div className="lg:pr-4">
-                                <ul className="space-y-6 text-base lg:flex lg:gap-8 lg:space-y-0 lg:text-sm">
+                        <div className="bg-background in-data-[state=active]:block lg:in-data-[state=active]:flex mb-6 hidden w-full flex-wrap items-center justify-end space-y-8 rounded-3xl border p-6 shadow-2xl shadow-zinc-300/20 md:flex-nowrap lg:m-0 lg:flex lg:flex-1 lg:min-w-0 lg:gap-6 lg:space-y-0 lg:border-transparent lg:bg-transparent lg:p-0 lg:shadow-none dark:shadow-none dark:lg:bg-transparent">
+                            <div className="lg:pr-4 lg:overflow-x-auto [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]">
+                                <ul className="space-y-6 text-base lg:flex lg:flex-nowrap lg:gap-8 lg:space-y-0 lg:text-sm">
                                     {menuItems.map((item, index) => (
                                         <li key={index}>
                                             <Link
                                                 href={item.href}
-                                                className="text-muted-foreground hover:text-accent-foreground block duration-150">
+                                                className="text-muted-foreground hover:text-accent-foreground block duration-150 whitespace-nowrap">
                                                 <span>{item.name}</span>
                                             </Link>
                                         </li>