From ec16c9faeab09b3b6fa15b58eb5b85ccaceb3842 Mon Sep 17 00:00:00 2001
From: you <you@example.com>
Date: Fri, 20 Mar 2026 00:34:16 +0000
Subject: [PATCH] fix: mobile VCR bar bottom padding with safe-area + 20px
 fallback

---
 public/index.html | 2 +-
 public/live.css   | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/public/index.html b/public/index.html
index 91198bc1..665cee1f 100644
--- a/public/index.html
+++ b/public/index.html
@@ -22,7 +22,7 @@
   <meta name="twitter:image" content="https://raw.githubusercontent.com/Kpa-clawbot/meshcore-analyzer/master/public/og-image.png">
   <link rel="stylesheet" href="style.css?v=1773963867">
   <link rel="stylesheet" href="home.css">
-  <link rel="stylesheet" href="live.css?v=1773966804">
+  <link rel="stylesheet" href="live.css?v=1773966856">
   <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
     integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
     crossorigin="anonymous">
diff --git a/public/live.css b/public/live.css
index e0d04b3d..be2ae67c 100644
--- a/public/live.css
+++ b/public/live.css
@@ -630,6 +630,7 @@
   /* Mobile VCR: two-row stacked layout */
   .vcr-bar {
     padding: 4px 8px;
+    padding-bottom: calc(4px + env(safe-area-inset-bottom, 20px));
     flex-wrap: wrap;
     gap: 4px;
     overflow: visible;