From 68fd77ac9dae9140095723c8d90f90c4accea138 Mon Sep 17 00:00:00 2001
From: ssmithx <atobitcoin@proton.me>
Date: Thu, 6 Aug 2026 12:45:55 +0000
Subject: [PATCH] =?UTF-8?q?Make=20the=20header=20and=20floating=20panels?=
 =?UTF-8?q?=20responsive=20=E2=80=94=20was=20overflowing=20on=20mobile?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Header packed logo + two full team-stat lines + user info + 3 buttons
into one unwrapped flex row — badly overflows anything narrower than a
wide desktop window. Now flex-col (stacked, small text) below the sm:
(640px) breakpoint, reverting to the original single-row layout above
it. Button labels shorten to icon-only on mobile (Sync -> just the ↻,
Disconnect -> ⏻) since 'Sync BTC Map' / 'Disconnect' text alone were
wide enough to force wrapping even in a flex-wrap row.

Also capped the two floating map panels (link-source banner, selected-
place detail) to the viewport width — w-72 (288px) plus its offset was
already right at the edge of a 320px phone screen and would overflow on
anything narrower.
---
 frontend/src/views/MapView.vue | 28 ++++++++++++++++++----------
 1 file changed, 18 insertions(+), 10 deletions(-)

diff --git a/frontend/src/views/MapView.vue b/frontend/src/views/MapView.vue
index 3c6e7ff..fa4eef1 100644
--- a/frontend/src/views/MapView.vue
+++ b/frontend/src/views/MapView.vue
@@ -248,23 +248,25 @@ watch(linkSourceId, redraw);
 
 <template>
   <div class="flex h-full flex-col bg-void">
-    <header class="hud-panel z-[1000] m-2 flex items-center justify-between gap-4 px-4 py-2 text-sm">
-      <div class="flex items-center gap-5">
-        <span class="font-display text-lg font-black tracking-widest text-cyan-neon text-glow-cyan">REGRESS</span>
-        <span class="flex items-center gap-1 font-bold text-orange-neon text-glow-orange">
+    <header
+      class="hud-panel z-[1000] m-2 flex flex-col gap-2 p-3 text-xs sm:flex-row sm:flex-wrap sm:items-center sm:justify-between sm:gap-x-4 sm:gap-y-2 sm:px-4 sm:py-2 sm:text-sm"
+    >
+      <div class="flex flex-col gap-1 sm:flex-row sm:items-center sm:gap-4">
+        <span class="font-display text-base font-black tracking-widest text-cyan-neon text-glow-cyan sm:text-lg">REGRESS</span>
+        <span class="flex flex-wrap items-center gap-1 font-bold text-orange-neon text-glow-orange">
           ▲ {{ orangeScore?.claimedPlaces ?? 0 }} <span class="text-orange-neon/90">nodes</span> ·
           {{ orangeScore?.links ?? 0 }} <span class="text-orange-neon/90">links</span> ·
           {{ orangeScore?.fields ?? 0 }} <span class="text-orange-neon/90">fields</span> ·
           {{ (orangeScore?.areaKm2 ?? 0).toFixed(2) }} km²
         </span>
-        <span class="flex items-center gap-1 font-bold text-green-neon text-glow-green">
+        <span class="flex flex-wrap items-center gap-1 font-bold text-green-neon text-glow-green">
           ▲ {{ greenScore?.claimedPlaces ?? 0 }} <span class="text-green-neon/90">nodes</span> ·
           {{ greenScore?.links ?? 0 }} <span class="text-green-neon/90">links</span> ·
           {{ greenScore?.fields ?? 0 }} <span class="text-green-neon/90">fields</span> ·
           {{ (greenScore?.areaKm2 ?? 0).toFixed(2) }} km²
         </span>
       </div>
-      <div class="flex items-center gap-3">
+      <div class="flex flex-wrap items-center gap-2 sm:gap-3">
         <span class="text-cyan-neon/95">
           {{ auth.displayName ?? auth.pubkey?.slice(0, 8) }}//<span
             :class="auth.team === 'orange' ? 'text-orange-neon text-glow-orange' : 'text-green-neon text-glow-green'"
@@ -277,7 +279,7 @@ watch(linkSourceId, redraw);
           :disabled="actionBusy"
           @click="doSync"
         >
-          ↻ Sync BTC Map
+          ↻ <span class="hidden sm:inline">Sync BTC Map</span>
         </button>
         <button
           class="rounded border border-cyan-neon/50 bg-black/40 px-3 py-1 text-cyan-neon transition hover:border-cyan-neon hover:shadow-glow-cyan"
@@ -290,7 +292,7 @@ watch(linkSourceId, redraw);
           class="rounded border border-magenta-neon/50 bg-black/40 px-3 py-1 text-magenta-neon transition hover:border-magenta-neon hover:shadow-glow-magenta"
           @click="auth.logout()"
         >
-          Disconnect
+          <span class="sm:hidden">⏻</span><span class="hidden sm:inline">Disconnect</span>
         </button>
       </div>
     </header>
@@ -298,12 +300,18 @@ watch(linkSourceId, redraw);
     <div class="relative flex-1">
       <div ref="mapEl" class="h-full w-full"></div>
 
-      <div v-if="linkSourcePlace" class="hud-panel absolute left-4 top-4 z-[1000] px-4 py-2 text-sm text-cyan-neon">
+      <div
+        v-if="linkSourcePlace"
+        class="hud-panel absolute left-4 top-4 z-[1000] max-w-[calc(100vw-2rem)] px-4 py-2 text-sm text-cyan-neon"
+      >
         LINKING FROM <strong class="text-glow-cyan">{{ linkSourcePlace.name }}</strong> — select a friendly node, or
         <button class="ml-2 text-magenta-neon underline" @click="cancelLink">abort</button>
       </div>
 
-      <div v-if="selectedPlace" class="hud-panel absolute right-4 top-4 z-[1000] w-72 p-4 text-sm">
+      <div
+        v-if="selectedPlace"
+        class="hud-panel absolute right-4 top-4 z-[1000] w-[min(18rem,calc(100vw-2rem))] p-4 text-sm"
+      >
         <div class="mb-1 flex items-start justify-between gap-2">
           <h2 class="font-display font-bold text-cyan-neon text-glow-cyan">
             {{ selectedPlace.name || `Node ${selectedPlace.id}` }}