mobile

frontend/src/components/QuickRegionNav.tsx

@@ -18,12 +18,16 @@ export function QuickRegionNav() {
   const focusOnRegion = useAtlasStore((s) => s.focusOnRegion);
 
   return (
-    <div className="absolute top-3 left-1/2 -translate-x-1/2 flex flex-wrap gap-1.5 justify-center bg-panel/90 border border-white/10 rounded-lg px-3 py-2 shadow-lg max-w-[90%]">
+    <div
+      className="absolute top-14 md:top-3 left-1/2 -translate-x-1/2 flex gap-1.5
+        overflow-x-auto md:flex-wrap md:justify-center bg-panel/90 border border-white/10
+        rounded-lg px-3 py-2 shadow-lg max-w-[92vw] md:max-w-[90%]"
+    >
       {REGIONS.map((r) => (
         <button
           key={r.region}
           onClick={() => focusOnRegion(r.region)}
-          className="text-xs px-2.5 py-1 rounded-full bg-white/5 hover:bg-accent hover:text-white text-slate-300 transition-colors"
+          className="shrink-0 text-xs px-3 py-1.5 rounded-full bg-white/5 hover:bg-accent hover:text-white text-slate-300 transition-colors"
         >
           {r.label}
         </button>