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

style: optimize drawer layout for mobile portrait viewports

Browse Source 
Update mobile portrait media queries in RendererDrawer and ServerDrawer to span full viewport width, reduce background opacity to 6%, and remove side box shadows. This flattens the visual style and improves layout for narrow screens.
This commit is contained in:
Eric Coissac
2026-06-07 14:25:43 +02:00
parent 2b3fae7778
commit 037435af20
2 changed files with 4 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
pmoapp/webapp/src/components/unified/RendererDrawer.vue
View File

@@ -860,14 +860,8 @@ async function handleTransferQueue(event: Event, targetRendererId: string) {
/* Mobile responsive - portrait */ /* Mobile responsive - portrait */
@media (max-width: 768px) and (orientation: portrait) { @media (max-width: 768px) and (orientation: portrait) {
.renderer-drawer { .renderer-drawer {
width: 100vw; /* Mobile portrait: 100% de l'écran */ width: 100vw;
background: rgba( box-shadow: none;
255,
255,
255,
0.06
); /* Encore plus transparent sur mobile */
box-shadow: none; /* Pas d'ombre sur les côtés */
} }
.drawer-header { .drawer-header {

10
pmoapp/webapp/src/components/unified/ServerDrawer.vue
View File

@@ -1439,14 +1439,8 @@ function handleSettingsClick() {
/* Mobile responsive - portrait */ /* Mobile responsive - portrait */
@media (max-width: 768px) and (orientation: portrait) { @media (max-width: 768px) and (orientation: portrait) {
.server-drawer { .server-drawer {
width: 100vw; /* Mobile portrait: 100% de l'écran */ width: 100vw;
background: rgba( box-shadow: none;
255,
255,
255,
0.06
); /* Encore plus transparent sur mobile */
box-shadow: none; /* Pas d'ombre sur les côtés */
} }
.drawer-header { .drawer-header {