From 291f8bc20d1ca43b4f7d74cefe6f8dfb4dbaad1a Mon Sep 17 00:00:00 2001
From: chpark <chpark@wace.me>
Date: Wed, 29 Apr 2026 18:32:16 +0900
Subject: [PATCH] Header dropdown menu visibility fix: inline color #1f2937 +
 JS hover fallback
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The mega-menu sub-panel was rendering with invisible text on some browsers
(Tailwind class chain in v4 + framer-motion mount-time race). Switching to
inline style locks the contrast regardless of CSS-class resolution order:

- panel motion.div: explicit background:#ffffff + color:#1f2937 + z-50
- each sub-link: inline color:#1f2937 (default) and white-on-violet hover
  pushed via onMouseOver/Out as a JS fallback
- top-level mega-menu link already had explicit color:#fff with text shadow

This is defensive — no harm if Tailwind already handled it; corrects any
case where the panel showed empty.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../apps/web/src/components/Chrome/Header.tsx     | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/next-app/apps/web/src/components/Chrome/Header.tsx b/next-app/apps/web/src/components/Chrome/Header.tsx
index d338a81..f29863e 100644
--- a/next-app/apps/web/src/components/Chrome/Header.tsx
+++ b/next-app/apps/web/src/components/Chrome/Header.tsx
@@ -153,12 +153,12 @@ function MegaPanel({ items }: { items: MenuItem[] }) {
   const multiCol = sections.some((s) => s.links.length >= 6) || total >= 14;
 
   return (
-    <div className={`grid gap-x-4 gap-y-3 ${multiCol ? 'grid-cols-3' : 'grid-cols-1'}`}>
+    <div className={`grid gap-x-4 gap-y-3 ${multiCol ? 'grid-cols-3' : 'grid-cols-1'}`} style={{ color: '#1f2937' }}>
       {sections.map((s, si) => (
         <div key={si} className="min-w-[160px]">
           {s.title && (
-            <div className="mb-1 border-b border-brand-100 pb-1 text-[11px] font-bold uppercase tracking-widest text-brand-500">
-              {s.href && s.href !== '#' ? <Link href={s.href} className="hover:text-brand-700">{s.title}</Link> : s.title}
+            <div className="mb-1 border-b border-brand-100 pb-1 text-[11px] font-bold uppercase tracking-widest" style={{ color: '#7c3aed' }}>
+              {s.href && s.href !== '#' ? <Link href={s.href} style={{ color: '#7c3aed' }}>{s.title}</Link> : s.title}
             </div>
           )}
           <ul className="m-0 grid gap-0.5 p-0 list-none">
@@ -166,7 +166,10 @@ function MegaPanel({ items }: { items: MenuItem[] }) {
               <li key={ci}>
                 <Link
                   href={c.href || '#'}
-                  className="block rounded-lg px-3 py-2 text-[13.5px] font-medium text-neutral-800 transition hover:bg-gradient-to-r hover:from-brand-600 hover:to-fuchsia-600 hover:text-white hover:shadow-[0_4px_14px_rgba(124,82,224,0.25)] whitespace-nowrap"
+                  style={{ color: '#1f2937', display: 'block' }}
+                  className="rounded-lg px-3 py-2 text-[13.5px] font-medium transition whitespace-nowrap hover:!text-white hover:bg-gradient-to-r hover:from-violet-600 hover:to-fuchsia-600 hover:shadow-[0_4px_14px_rgba(124,82,224,0.25)]"
+                  onMouseOver={(e) => { e.currentTarget.style.color = '#ffffff'; }}
+                  onMouseOut={(e) => { e.currentTarget.style.color = '#1f2937'; }}
                 >
                   {c.label}
                 </Link>
@@ -206,8 +209,8 @@ function MegaNav({ menus, isDark: _isDark }: { menus: MenuItem[]; isDark: boolea
                 {open === i && hasChildren && (
                   <motion.div
                     initial={{ opacity: 0, y: 6 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: 6 }} transition={{ duration: 0.16 }}
-                    className="absolute left-0 top-full z-40 mt-0 rounded-2xl border border-brand-100 bg-white p-3 shadow-[0_18px_38px_rgba(60,30,120,0.22)]"
-                    style={{ minWidth: 240 }}
+                    className="absolute left-0 top-full z-50 mt-0 rounded-2xl border border-brand-100 p-3 shadow-[0_18px_38px_rgba(60,30,120,0.22)]"
+                    style={{ minWidth: 240, background: '#ffffff', color: '#1f2937' }}
                   >
                     <MegaPanel items={m.children!} />
                   </motion.div>