eric/pmomusic
1
0
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects Releases 3 Wiki Activity

fix: correct queue drawer positioning and safe-area layout

Browse Source 
Replace malformed max-height values with precise calc() expressions and update open/closed transform states. Apply flexbox improvements to ensure reliable mobile drawer layout and proper safe-area padding above the BottomTabBar.
This commit is contained in:
Eric Coissac
2026-06-07 14:40:03 +02:00
parent 037435af20
commit 8bc0670de4
1 changed files with 13 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
pmoapp/webapp/src/components/unified/RendererTabContent.vue
View File

@@ -231,7 +231,8 @@ async function handleQueueItemClick(item: QueueItem) {
/* Queue drawer visible sur mobile (géré par v-if maintenant) */
.queue-drawer {
position: fixed;
bottom: 0;
/* Ancré juste au-dessus de la BottomTabBar (64px) et de la safe-area système */
bottom: calc(64px + env(safe-area-inset-bottom, 0px));
left: 0;
right: 0;
background: rgba(22, 22, 32, 0.96);
@@ -239,12 +240,11 @@ async function handleQueueItemClick(item: QueueItem) {
-webkit-backdrop-filter: blur(8px);
border-top: 1px solid rgba(255, 255, 255, 0.12);
box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.4);
/* Fermé: caché sauf le toggle (56px) qui dépasse au-dessus de la BottomTabBar.
La BottomTabBar fait 64px + env(safe-area-inset-bottom) de padding. */
transform: translateY(calc(100% - 56px - 64px - env(safe-area-inset-bottom, 0px)));
/* Fermé: seul le toggle (56px) visible */
transform: translateY(calc(100% - 56px));
transition: transform 0.3s ease;
z-index: 95; /* En dessous de la BottomTabBar (z-index: 100) */
max-height: 70vh;
max-height: calc(100vh - 64px - env(safe-area-inset-bottom, 0px));
display: flex;
flex-direction: column;
/* Fermé: ne bloque pas les clics en dehors du toggle */
@@ -252,9 +252,9 @@ async function handleQueueItemClick(item: QueueItem) {
}
.queue-drawer.open {
/* Ouvert: remonte juste au-dessus de la BottomTabBar (64px + safe area) */
transform: translateY(calc(64px + env(safe-area-inset-bottom, 0px)));
pointer-events: auto; /* Ouvert: capture les clics */
/* Ouvert: le drawer occupe toute la hauteur disponible au-dessus de la tab bar */
transform: translateY(0);
pointer-events: auto;
}
@media (prefers-color-scheme: light) {
@@ -267,6 +267,7 @@ async function handleQueueItemClick(item: QueueItem) {
.queue-drawer-toggle {
width: 100%;
height: 56px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
@@ -282,11 +283,9 @@ async function handleQueueItemClick(item: QueueItem) {
}
.queue-drawer-content {
max-height: calc(70vh - 56px);
flex: 1;
overflow-y: auto;
padding: var(--spacing-md);
/* Ensure the last item clears the safe-area / system nav bar */
padding-bottom: max(var(--spacing-md), env(safe-area-inset-bottom, 0px));
}
.queue-drawer-backdrop {
@@ -295,12 +294,12 @@ async function handleQueueItemClick(item: QueueItem) {
top: 0;
left: 0;
right: 0;
bottom: 64px; /* S'arrête au-dessus de la BottomTabBar */
bottom: calc(64px + env(safe-area-inset-bottom, 0px));
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
z-index: 94; /* Entre la BottomTabBar et le drawer */
pointer-events: auto; /* Capture les clics pour fermer le drawer */
z-index: 94;
pointer-events: auto;
}
.controls-column {