From 6f21a88ffe9f8f6964930fb3b38e612dcc0190e2 Mon Sep 17 00:00:00 2001
From: s0lray <s0lray@users.noreply.github.com>
Date: Fri, 27 Mar 2026 08:30:59 -0400
Subject: [PATCH] Fix mobile detail panel height to account for browser chrome
 (THE-188)

Use 100dvh (dynamic viewport height) instead of 100vh so the panel
footer with "Report an Issue" buttons is accessible on mobile browsers
where the address bar and navigation bar reduce visible viewport height.
Falls back to 100vh for older browsers.

Also enable pointer-events on the panel overlay on mobile so tapping
outside the panel closes it.

Co-Authored-By: Paperclip <noreply@paperclip.ing>
---
 public/css/panel.css | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/public/css/panel.css b/public/css/panel.css
index bf76e56..f623f76 100644
--- a/public/css/panel.css
+++ b/public/css/panel.css
@@ -21,6 +21,7 @@
   right: 0;
   width: 340px;
   height: 100vh;
+  height: 100dvh;
   background: var(--color-surface);
   border-left: 1px solid var(--color-border);
   box-shadow: var(--shadow-md);
@@ -458,9 +459,14 @@
   #tool-panel {
     width: 100vw;
     height: 100vh;
+    height: 100dvh;
     top: 0;
     right: 0;
     border-left: none;
     border-radius: 0;
   }
+
+  #panel-overlay.visible {
+    pointer-events: auto;
+  }
 }