feat: compact relay status indicator on mobile

- Show only icon on mobile (44x44px touch target)
- Tap to expand for full details
- Smooth transition between compact and expanded states
- Maintains full display on desktop
- Reduces screen clutter on mobile while keeping info accessible

Flight mode notice now just shows airplane icon on mobile.
Tap it to see full connection details.
This commit is contained in:
Gigi
2025-10-11 08:09:29 +01:00
parent 76835e2509
commit 4f952816ea
2 changed files with 76 additions and 26 deletions

View File

@@ -2909,6 +2909,34 @@ body.mobile-sidebar-open {
cursor: default;
}
/* Mobile compact mode - just show icon */
@media (max-width: 768px) {
.relay-status-indicator.mobile {
padding: 0.5rem;
width: var(--min-touch-target);
height: var(--min-touch-target);
display: flex;
align-items: center;
justify-content: center;
bottom: 1rem;
left: 1rem;
}
.relay-status-indicator.mobile.expanded {
width: auto;
padding: 0.75rem 1rem;
gap: 0.75rem;
}
.relay-status-indicator.mobile .relay-status-icon {
font-size: 1.1rem;
}
.relay-status-indicator.mobile:active {
transform: scale(0.95);
}
}
.relay-status-indicator.connecting {
background: rgba(100, 108, 255, 0.15);
border: 1px solid rgba(100, 108, 255, 0.25);