mobile

frontend/src/components/Layout.tsx

@@ -5,10 +5,12 @@ const linkClass = ({ isActive }: { isActive: boolean }) =>
 
 export function Layout() {
   return (
-    <div className="h-screen flex flex-col">
-      <header className="flex items-center gap-4 px-4 py-2 border-b border-white/10 bg-panel">
-        <h1 className="text-sm font-semibold tracking-wide text-white">🫀 Atlas 3D de Anatomia</h1>
-        <nav className="flex gap-1">
+    <div className="h-[100dvh] flex flex-col">
+      <header className="flex items-center gap-2 sm:gap-4 px-2 sm:px-4 py-2 border-b border-white/10 bg-panel overflow-x-auto">
+        <h1 className="text-sm font-semibold tracking-wide text-white whitespace-nowrap">
+          🫀 <span className="hidden sm:inline">Atlas 3D de Anatomia</span>
+        </h1>
+        <nav className="flex gap-1 shrink-0">
           <NavLink to="/" end className={linkClass}>
             Atlas
           </NavLink>
@@ -23,7 +25,7 @@ export function Layout() {
           href="https://github.com/LluisV/Z-Anatomy-Sample"
           target="_blank"
           rel="noreferrer"
-          className="ml-auto text-[11px] text-slate-500 hover:text-slate-300"
+          className="ml-auto hidden md:inline-block text-[11px] text-slate-500 hover:text-slate-300 shrink-0"
         >
           Modelos 3D: projeto Z-Anatomy (CC BY-SA 4.0)
         </a>

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>

frontend/src/components/SearchNav.tsx

@@ -77,7 +77,7 @@ export function SearchNav() {
         value={query}
         onChange={(e) => setQuery(e.target.value)}
         placeholder="Buscar estrutura (ex: fêmur, nervo ciático)..."
-        className="w-full rounded bg-white/5 border border-white/10 px-3 py-2 text-sm placeholder:text-slate-500 focus:outline-none focus:ring-1 focus:ring-accent"
+        className="w-full rounded bg-white/5 border border-white/10 px-3 py-2 text-base sm:text-sm placeholder:text-slate-500 focus:outline-none focus:ring-1 focus:ring-accent"
       />
 
       <div className="overflow-y-auto flex-1 min-h-0 pr-1">

frontend/src/components/viewer/Scene.tsx

@@ -209,6 +209,7 @@ export function Scene({ bySlug }: { bySlug: Map<string, Structure> }) {
   return (
     <Canvas
       shadows
+      dpr={[1, 1.5]}
       camera={{ position: [1.2, 1.4, 1.6], fov: 45, near: 0.01, far: 100000 }}
       gl={{ localClippingEnabled: true }}
     >