josh/ytplayer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add topbar adjustments for notch devices on pwa

Browse Source 
Task #47 completed by ClaudeQueue

ClaudeQueue
This commit is contained in:
Claude Worker
2026-06-30 20:44:28 +00:00
parent d01f51a7d0
commit 2b195d3b6b
1 changed files with 36 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
frontend/styles.css
View File

@@ -1739,11 +1739,19 @@ input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.25); }
.app.sidebar-open .sidebar-backdrop { display: block; opacity: 1; }
/* --- Topbar: full-width, padded for status-bar notch ------------------- */
/* Width 100% ensures the topbar background fills behind the notch/status
bar area so its colour (the gradient) extends edge-to-edge. */
.topbar {
padding-top: calc(12px + env(safe-area-inset-top));
padding-left: calc(14px + env(safe-area-inset-left));
padding-right: calc(14px + env(safe-area-inset-right));
width: 100%;
/* iOS < 11.2 fallback — constant() was the predecessor to env() */
padding-top: calc(12px + constant(safe-area-inset-top, 0px));
padding-left: calc(14px + constant(safe-area-inset-left, 0px));
padding-right: calc(14px + constant(safe-area-inset-right, 0px));
padding-bottom: 12px;
/* Modern browsers: env() overrides the constant() lines above */
padding-top: calc(12px + env(safe-area-inset-top, 0px));
padding-left: calc(14px + env(safe-area-inset-left, 0px));
padding-right: calc(14px + env(safe-area-inset-right, 0px));
position: sticky;
top: 0;
z-index: 50;
@@ -1889,3 +1897,28 @@ input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.25); }
.portrait-pwa .player-pane {
/* Player pane is always visible at top; no snap needed. */
}
/* ============================================================================
* LANDSCAPE PWA — activates in standalone (installed) mode + landscape
*
* In landscape, the notch (if present) sits on one of the horizontal edges.
* We apply safe-area-inset-* to the topbar so its content never slides under
* the notch or the status-bar area, and ensure the topbar background spans
* the full screen width so the theme colour fills the notch region.
* ========================================================================== */
@media (display-mode: standalone) and (orientation: landscape) {
/* Topbar: full width + safe-area padding on all sides.
constant() for iOS < 11.2; env() for all modern browsers (overrides above). */
.topbar {
width: 100%;
/* iOS < 11.2 fallback */
padding-top: calc(8px + constant(safe-area-inset-top, 0px));
padding-left: calc(14px + constant(safe-area-inset-left, 0px));
padding-right: calc(14px + constant(safe-area-inset-right, 0px));
padding-bottom: 8px;
/* Modern browsers */
padding-top: calc(8px + env(safe-area-inset-top, 0px));
padding-left: calc(14px + env(safe-area-inset-left, 0px));
padding-right: calc(14px + env(safe-area-inset-right, 0px));
}
}