From 037435af20307d37dac490cadf9350c71feed9d0 Mon Sep 17 00:00:00 2001 From: Eric Coissac Date: Sun, 7 Jun 2026 14:25:43 +0200 Subject: [PATCH] style: optimize drawer layout for mobile portrait viewports 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. --- .../webapp/src/components/unified/RendererDrawer.vue | 10 ++-------- pmoapp/webapp/src/components/unified/ServerDrawer.vue | 10 ++-------- 2 files changed, 4 insertions(+), 16 deletions(-) diff --git a/pmoapp/webapp/src/components/unified/RendererDrawer.vue b/pmoapp/webapp/src/components/unified/RendererDrawer.vue index 1e81e9b1..052d681e 100644 --- a/pmoapp/webapp/src/components/unified/RendererDrawer.vue +++ b/pmoapp/webapp/src/components/unified/RendererDrawer.vue @@ -860,14 +860,8 @@ async function handleTransferQueue(event: Event, targetRendererId: string) { /* Mobile responsive - portrait */ @media (max-width: 768px) and (orientation: portrait) { .renderer-drawer { - width: 100vw; /* Mobile portrait: 100% de l'écran */ - background: rgba( - 255, - 255, - 255, - 0.06 - ); /* Encore plus transparent sur mobile */ - box-shadow: none; /* Pas d'ombre sur les côtés */ + width: 100vw; + box-shadow: none; } .drawer-header { diff --git a/pmoapp/webapp/src/components/unified/ServerDrawer.vue b/pmoapp/webapp/src/components/unified/ServerDrawer.vue index 808867e5..035d41e6 100644 --- a/pmoapp/webapp/src/components/unified/ServerDrawer.vue +++ b/pmoapp/webapp/src/components/unified/ServerDrawer.vue @@ -1439,14 +1439,8 @@ function handleSettingsClick() { /* Mobile responsive - portrait */ @media (max-width: 768px) and (orientation: portrait) { .server-drawer { - width: 100vw; /* Mobile portrait: 100% de l'écran */ - background: rgba( - 255, - 255, - 255, - 0.06 - ); /* Encore plus transparent sur mobile */ - box-shadow: none; /* Pas d'ombre sur les côtés */ + width: 100vw; + box-shadow: none; } .drawer-header {