From e2e3e3b9a65cf1467fcf30b170e297f7dd445c60 Mon Sep 17 00:00:00 2001
From: HikeMap User <melancholytron@gmail.com>
Date: Thu, 1 Jan 2026 08:57:00 -0600
Subject: [PATCH] Add responsive max-width and right alignment for overlay
 panels
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Limited max-width to 500px on desktop for better usability
- Right-aligned panels on desktop (right: 0)
- Full width on mobile (max-width: 100% below 768px)
- Adjusted border radius: rounded top-left only on desktop
- Prevents excessive width on large screens
- Maintains full-width experience on mobile

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 index.html | 32 ++++++++++++++++++++++++++++++--
 1 file changed, 30 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 6f4e395..ca32cad 100644
--- a/index.html
+++ b/index.html
@@ -715,8 +715,9 @@
         .admin-panel-overlay {
             position: fixed;
             bottom: 0;
-            left: 0;
             right: 0;
+            width: 100%;
+            max-width: 500px;
             height: 50vh;
             background: rgba(30, 30, 30, 0.95);
             backdrop-filter: blur(10px);
@@ -730,6 +731,19 @@
             flex-direction: column;
         }
 
+        @media (max-width: 768px) {
+            .admin-panel-overlay {
+                max-width: 100%;
+                border-radius: 20px 20px 0 0;
+            }
+        }
+
+        @media (min-width: 769px) {
+            .admin-panel-overlay {
+                border-radius: 20px 0 0 0;
+            }
+        }
+
         .admin-panel-overlay.active {
             transform: translateY(0);
         }
@@ -778,8 +792,9 @@
         .edit-panel-overlay {
             position: fixed;
             bottom: 0;
-            left: 0;
             right: 0;
+            width: 100%;
+            max-width: 500px;
             height: 60vh;
             background: rgba(30, 30, 30, 0.95);
             backdrop-filter: blur(10px);
@@ -793,6 +808,19 @@
             flex-direction: column;
         }
 
+        @media (max-width: 768px) {
+            .edit-panel-overlay {
+                max-width: 100%;
+                border-radius: 20px 20px 0 0;
+            }
+        }
+
+        @media (min-width: 769px) {
+            .edit-panel-overlay {
+                border-radius: 20px 0 0 0;
+            }
+        }
+
         .edit-panel-overlay.active {
             transform: translateY(0);
         }