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

Fix ACARS toggle button visibility by using flexbox layout

Browse Source 
The parent container has overflow:auto which clipped the absolutely
positioned button. Changed to simple flexbox approach where:
- Button is a normal flex child (always visible)
- Content div collapses to width:0 when collapsed
- Map expands to fill available space via flex

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Smittix
2026-01-13 23:01:17 +00:00
parent b423dcedf7
commit 536b762f97
2 changed files with 21 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
static/css/adsb_dashboard.css
View File

@@ -194,32 +194,18 @@ body {
/* ACARS sidebar (between map and main sidebar) - Collapsible */
.acars-sidebar {
position: relative;
background: var(--bg-panel);
border-left: 1px solid var(--border-color);
display: flex;
flex-direction: row;
overflow: visible;
transition: width 0.3s ease;
width: 280px;
}
.acars-sidebar.collapsed {
width: 0;
border-left: none;
}
.acars-collapse-btn {
position: absolute;
left: 0;
top: 50%;
transform: translateX(-100%) translateY(-50%);
width: 24px;
height: 80px;
width: 28px;
min-width: 28px;
background: var(--bg-card);
border: 1px solid var(--border-color);
border-right: none;
border-radius: 6px 0 0 6px;
border: none;
border-right: 1px solid var(--border-color);
color: var(--accent-cyan);
cursor: pointer;
display: flex;
@@ -229,7 +215,6 @@ body {
gap: 6px;
padding: 8px 0;
transition: background 0.2s;
z-index: 100;
}
.acars-collapse-btn:hover {
@@ -254,7 +239,7 @@ body {
}
#acarsCollapseIcon {
font-size: 9px;
font-size: 10px;
transition: transform 0.3s;
}
@@ -263,16 +248,15 @@ body {
}
.acars-sidebar-content {
flex: 1;
width: 250px;
display: flex;
flex-direction: column;
overflow: hidden;
min-width: 0;
opacity: 1;
transition: opacity 0.2s ease;
transition: width 0.3s ease, opacity 0.2s ease;
}
.acars-sidebar.collapsed .acars-sidebar-content {
width: 0;
opacity: 0;
pointer-events: none;
}