Mirror/intercept
1
0
Fork 0
mirror of https://github.com/smittix/intercept.git synced 2026-04-25 07:10:00 -07:00
Code Issues Packages Projects Releases Wiki Activity

Fix ADS-B dashboard mobile layout - proper flex/grid handling

Browse Source
This commit is contained in:
Smittix
2026-01-15 09:26:16 +00:00
parent d510ba30f6
commit fdd91485fc
1 changed files with 25 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
static/css/adsb_dashboard.css
View File

@@ -448,15 +448,31 @@ body {
/* Main display container (map + radar scope) */
.main-display {
grid-column: 2;
grid-row: 1;
position: relative;
flex: 1;
min-height: 300px;
}
@media (min-width: 768px) {
.main-display {
grid-column: 1;
grid-row: 1;
}
}
@media (min-width: 1024px) {
.main-display {
grid-column: 2;
grid-row: 1;
}
}
.display-container {
position: relative;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
#radarMap {
@@ -1044,10 +1060,8 @@ body {
/* ============== MOBILE FIXES ============== */
@media (max-width: 767px) {
/* Dashboard should be scrollable, not fixed height */
/* Dashboard - allow scrolling */
.dashboard {
display: flex;
flex-direction: column;
height: auto;
min-height: calc(100dvh - 60px);
overflow-y: auto;
@@ -1055,47 +1069,17 @@ body {
-webkit-overflow-scrolling: touch;
}
/* Main display needs explicit height on mobile - reset grid properties */
/* Main display - explicit height for map */
.main-display {
grid-column: auto;
grid-row: auto;
width: 100%;
flex: none;
height: 50vh;
min-height: 300px;
flex-shrink: 0;
order: 1;
}
/* Map container needs full dimensions */
.display-container {
height: 100%;
width: 100%;
}
#radarMap {
height: 100% !important;
width: 100% !important;
min-height: 300px;
}
#radarScope {
height: 100%;
}
#radarCanvas {
max-width: 100%;
max-height: 100%;
}
/* Sidebar should not be height restricted */
/* Sidebar - stack below map */
.sidebar {
grid-column: auto;
grid-row: auto;
max-height: none;
flex-shrink: 0;
order: 2;
border-left: none;
border-top: 1px solid rgba(74, 158, 255, 0.2);
}
/* Hide ACARS sidebar on mobile */