Fix the topnav for more responsiveness

src/app/(normal)/artworks/artfight/page.tsx

@@ -0,0 +1,13 @@
+import UnderConstruction from "@/components/global/UnderConstruction";
+
+export default function ArtfightPage() {
+  return (
+    <div className="mx-auto w-full max-w-6xl px-4 py-10">
+      <UnderConstruction
+        title="Artfight Gallery"
+        subtitle="This page is getting ready for its big debut."
+        note="I’m curating attacks, revenges, and progress shots — check back soon."
+      />
+    </div>
+  );
+}

src/app/(normal)/miniatures/page.tsx

@@ -0,0 +1,13 @@
+import UnderConstruction from "@/components/global/UnderConstruction";
+
+export default function MiniaturesPage() {
+  return (
+    <div className="mx-auto w-full max-w-6xl px-4 py-10">
+      <UnderConstruction
+        title="Warhammer Miniatures"
+        subtitle="This page is getting ready for its big debut."
+        note="I’m curating attacks, revenges, and progress shots — check back soon."
+      />
+    </div>
+  );
+}

src/components/global/Header.tsx

@@ -6,9 +6,11 @@ export default function Header() {
 
   return (
     <div className="w-full">
-      <div className="flex items-center justify-between px-4 md:px-8 py-2">
-        <TopNav />
-        <div className="flex items-center gap-2">
+      <div className="flex w-full items-center gap-4 px-4 md:px-8 py-2">
+        <div className="flex-1 min-w-0">
+          <TopNav />
+        </div>
+        <div className="flex items-center gap-2 shrink-0">
           <NsfwModeToggle />
           <ModeToggle />
         </div>

src/components/global/TopNav.tsx

@@ -1,9 +1,9 @@
 "use client"
 
 import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, navigationMenuTriggerStyle } from "@/components/ui/navigation-menu";
-import { Menu } from "lucide-react";
+import { ChevronDown, Ellipsis, Menu } from "lucide-react";
 import Link from "next/link";
-import { useState } from "react";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { Button } from "../ui/button";
 import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "../ui/sheet";
 
@@ -18,6 +18,7 @@ const links = [
       { href: "/artworks/artfight", label: "Artfight" }
     ],
   },
+  { type: "link" as const, href: "/miniatures", label: "Miniatures" },
   { type: "link" as const, href: "/commissions", label: "Commissions" },
   { type: "link" as const, href: "/commissions/status", label: "Commission Status" },
   { type: "link" as const, href: "/tos", label: "Terms of Service" },
@@ -26,46 +27,196 @@ const links = [
 
 export default function TopNav() {
   const [open, setOpen] = useState(false)
+  const requiredLinks = [
+    links[0], // Home
+    links[1], // Portfolio
+    links[4], // Commissions
+  ];
+  const flexibleLinks = links.filter((link) => !requiredLinks.includes(link));
+  const [visibleCount, setVisibleCount] = useState(flexibleLinks.length);
+  const listRef = useRef<HTMLUListElement | null>(null);
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const measureListRef = useRef<HTMLUListElement | null>(null);
+  const [containerWidth, setContainerWidth] = useState(0);
+
+  const visibleLinks = [...requiredLinks, ...flexibleLinks.slice(0, visibleCount)];
+  const overflowLinks = flexibleLinks.slice(visibleCount);
+  const showMore = overflowLinks.length > 0;
+
+  useEffect(() => {
+    const containerEl = containerRef.current;
+    if (!containerEl) return;
+    const update = () => {
+      setContainerWidth(containerEl.getBoundingClientRect().width);
+    };
+    const ro = new ResizeObserver(update);
+    ro.observe(containerEl);
+    window.addEventListener("resize", update);
+    update();
+    return () => {
+      ro.disconnect();
+      window.removeEventListener("resize", update);
+    };
+  }, []);
+
+  useLayoutEffect(() => {
+    const measureEl = measureListRef.current;
+    if (!measureEl || !containerWidth) return;
+    const items = Array.from(measureEl.children) as HTMLElement[];
+    if (!items.length) return;
+
+    const moreItem = items[items.length - 1];
+    const moreWidth = moreItem.getBoundingClientRect().width;
+    const itemWidths = items.slice(0, -1).map((el) => el.getBoundingClientRect().width);
+
+    const requiredIndexes = new Set([0, 1, 4]);
+    let requiredWidth = 0;
+    const flexibleWidths: number[] = [];
+    itemWidths.forEach((w, idx) => {
+      if (requiredIndexes.has(idx)) {
+        requiredWidth += w;
+      } else {
+        flexibleWidths.push(w);
+      }
+    });
+
+    const totalFlexibleWidth = flexibleWidths.reduce((a, b) => a + b, 0);
+    let nextVisibleCount = flexibleLinks.length;
+    const safetyPadding = 24;
+
+    if (requiredWidth + totalFlexibleWidth + safetyPadding > containerWidth) {
+      let available = containerWidth - requiredWidth - moreWidth - safetyPadding;
+      if (available < 0) available = 0;
+      let fit = 0;
+      let used = 0;
+      for (const w of flexibleWidths) {
+        if (used + w > available) break;
+        used += w;
+        fit += 1;
+      }
+      nextVisibleCount = fit;
+    }
+
+    if (nextVisibleCount !== visibleCount) {
+      setVisibleCount(nextVisibleCount);
+    }
+
+  }, [containerWidth, flexibleLinks.length, visibleCount]);
 
   return (
     <div className="w-full flex items-center justify-between">
       {/* Desktop Nav */}
-      <div className="hidden md:flex">
-        <NavigationMenu viewport={false} delayDuration={0} skipDelayDuration={0}>
-          <NavigationMenuList>
-            {links.map((item) => {
-              if (item.type === "dropdown") {
+      <div className="hidden md:flex flex-1 min-w-0">
+        <NavigationMenu
+          viewport={false}
+          delayDuration={0}
+          skipDelayDuration={0}
+          className="w-full min-w-0 max-w-none"
+        >
+          <div ref={containerRef} className="w-full max-w-full min-w-0">
+            <NavigationMenuList
+              ref={listRef}
+              className="w-full flex-nowrap justify-start min-w-0"
+            >
+              {visibleLinks.map((item) => {
+                if (item.type === "dropdown") {
+                  return (
+                    <NavigationMenuItem key={item.label}>
+                      <NavigationMenuTrigger className="hover:bg-hover data-[state=open]:bg-hover">
+                        {item.label}
+                      </NavigationMenuTrigger>
+                    <NavigationMenuContent className="z-50">
+                        <ul className="min-w-48">
+                          {item.items.map(({ href, label }) => (
+                            <li key={href}>
+                              <NavigationMenuLink asChild className="w-full hover:bg-hover">
+                                <Link href={href}>{label}</Link>
+                              </NavigationMenuLink>
+                            </li>
+                          ))}
+                        </ul>
+                      </NavigationMenuContent>
+                    </NavigationMenuItem>
+                  );
+                }
+
                 return (
-                  <NavigationMenuItem key={item.label}>
-                    <NavigationMenuTrigger className="hover:bg-hover data-[state=open]:bg-hover">
-                      {item.label}
-                    </NavigationMenuTrigger>
-                    <NavigationMenuContent>
-                      <ul className="min-w-48">
-                        {item.items.map(({ href, label }) => (
-                          <li key={href}>
-                            <NavigationMenuLink asChild className="w-full hover:bg-hover">
-                              <Link href={href}>{label}</Link>
-                            </NavigationMenuLink>
-                          </li>
-                        ))}
-                      </ul>
-                    </NavigationMenuContent>
+                  <NavigationMenuItem key={item.href}>
+                    <NavigationMenuLink
+                      asChild
+                      className={`${navigationMenuTriggerStyle()} hover:bg-hover data-active:bg-hover focus:bg-hover active:bg-hover`}
+                    >
+                      <Link href={item.href}>{item.label}</Link>
+                    </NavigationMenuLink>
                   </NavigationMenuItem>
                 );
-              }
+              })}
+              {showMore ? (
+                <NavigationMenuItem>
+                  <NavigationMenuTrigger className="hover:bg-hover data-[state=open]:bg-hover">
+                    <Ellipsis className="h-4 w-4" />
+                  </NavigationMenuTrigger>
+                  <NavigationMenuContent className="z-50">
+                    <ul className="min-w-48">
+                      {overflowLinks.map((item) => {
+                        if (item.type === "dropdown") {
+                          return (
+                            <li key={item.label}>
+                              <div className="px-2 py-1 text-xs uppercase tracking-wide text-muted-foreground">
+                                {item.label}
+                              </div>
+                              <ul className="pl-2">
+                                {item.items.map(({ href, label }) => (
+                                  <li key={href}>
+                                    <NavigationMenuLink asChild className="w-full hover:bg-hover">
+                                      <Link href={href}>{label}</Link>
+                                    </NavigationMenuLink>
+                                  </li>
+                                ))}
+                              </ul>
+                            </li>
+                          );
+                        }
 
-              return (
-                <NavigationMenuItem key={item.href}>
-                  <NavigationMenuLink
-                    asChild
-                    className={`${navigationMenuTriggerStyle()} hover:bg-hover data-active:bg-hover focus:bg-hover active:bg-hover`}
-                  >
-                    <Link href={item.href}>{item.label}</Link>
-                  </NavigationMenuLink>
+                        return (
+                          <li key={item.href}>
+                            <NavigationMenuLink asChild className="w-full hover:bg-hover">
+                              <Link href={item.href}>{item.label}</Link>
+                            </NavigationMenuLink>
+                          </li>
+                        );
+                      })}
+                    </ul>
+                  </NavigationMenuContent>
                 </NavigationMenuItem>
-              );
-            })}
+              ) : null}
+            </NavigationMenuList>
+          </div>
+        </NavigationMenu>
+      </div>
+
+      <div className="absolute left-0 top-0 -z-10 opacity-0 pointer-events-none">
+        <NavigationMenu viewport={false} delayDuration={0} skipDelayDuration={0}>
+          <NavigationMenuList ref={measureListRef} className="flex-nowrap">
+            {links.map((item) => (
+              <NavigationMenuItem key={`measure-${item.type === "dropdown" ? item.label : item.href}`}>
+                <div className={navigationMenuTriggerStyle()}>
+                  {item.type === "dropdown" ? (
+                    <span className="inline-flex items-center gap-1">
+                      {item.label}
+                      <ChevronDown className="h-3 w-3" />
+                    </span>
+                  ) : (
+                    item.label
+                  )}
+                </div>
+              </NavigationMenuItem>
+            ))}
+            <NavigationMenuItem>
+              <div className={navigationMenuTriggerStyle()}>
+                <Ellipsis className="h-4 w-4" />
+              </div>
+            </NavigationMenuItem>
           </NavigationMenuList>
         </NavigationMenu>
       </div>

src/components/global/UnderConstruction.tsx

@@ -0,0 +1,55 @@
+import { cn } from "@/lib/utils";
+import { Construction } from "lucide-react";
+import Link from "next/link";
+
+export default function UnderConstruction({
+  title = "Under Construction",
+  subtitle = "Artfight is getting its finishing touches.",
+  note = "Check back soon for the full gallery.",
+  actionHref = "/artworks",
+  actionLabel = "Back to Portfolio",
+}: {
+  title?: string;
+  subtitle?: string;
+  note?: string;
+  actionHref?: string;
+  actionLabel?: string;
+}) {
+  return (
+    <section className="relative overflow-hidden rounded-3xl border border-border bg-background/80 px-6 py-10 shadow-sm sm:px-10 sm:py-14">
+      <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_top,var(--color-muted)_0%,transparent_55%)] opacity-70" />
+      <div className="pointer-events-none absolute left-0 top-0 h-2 w-full bg-[repeating-linear-gradient(135deg,#7f1d1d_0px,#7f1d1d_8px,#ffffff_8px,#ffffff_16px)]" />
+
+      <div className="relative flex flex-col gap-8 lg:flex-row lg:items-center lg:justify-between">
+        <div className="max-w-xl space-y-4">
+          <div className="inline-flex items-center gap-2 rounded-full border border-border/70 bg-background/70 px-3 py-1 text-xs font-medium uppercase tracking-widest text-muted-foreground">
+            <Construction className="h-3.5 w-3.5 text-foreground/70" />
+            Under construction
+          </div>
+          <h1 className="text-3xl font-semibold tracking-tight sm:text-4xl">
+            {title}
+          </h1>
+          <p className="text-base text-muted-foreground sm:text-lg">
+            {subtitle}
+          </p>
+          <p className="text-sm text-muted-foreground/80">{note}</p>
+          <Link
+            href={actionHref}
+            className={cn(
+              "inline-flex items-center justify-center rounded-full border border-border bg-foreground px-4 py-2 text-sm font-medium text-background",
+              "transition hover:-translate-y-0.5 hover:bg-foreground/90"
+            )}
+          >
+            {actionLabel}
+          </Link>
+        </div>
+
+        <div className="relative mx-auto w-full max-w-md">
+          <div className="relative flex flex-col items-center justify-center gap-4 p-4">
+            <Construction className="h-20 w-20 text-red-800" />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}