Browse Source

Add responsive max-width and right alignment for overlay panels

- 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>
master
HikeMap User 1 month ago
parent
commit
e2e3e3b9a6
  1. 32
      index.html

32
index.html

@ -715,8 +715,9 @@
.admin-panel-overlay { .admin-panel-overlay {
position: fixed; position: fixed;
bottom: 0; bottom: 0;
left: 0;
right: 0; right: 0;
width: 100%;
max-width: 500px;
height: 50vh; height: 50vh;
background: rgba(30, 30, 30, 0.95); background: rgba(30, 30, 30, 0.95);
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
@ -730,6 +731,19 @@
flex-direction: column; 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 { .admin-panel-overlay.active {
transform: translateY(0); transform: translateY(0);
} }
@ -778,8 +792,9 @@
.edit-panel-overlay { .edit-panel-overlay {
position: fixed; position: fixed;
bottom: 0; bottom: 0;
left: 0;
right: 0; right: 0;
width: 100%;
max-width: 500px;
height: 60vh; height: 60vh;
background: rgba(30, 30, 30, 0.95); background: rgba(30, 30, 30, 0.95);
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
@ -793,6 +808,19 @@
flex-direction: column; 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 { .edit-panel-overlay.active {
transform: translateY(0); transform: translateY(0);
} }

Loading…
Cancel
Save