fix(layout): corriger la barre blanche en bas sur mobile réel

Sur un vrai appareil mobile, 100vh inclut le chrome du navigateur (barre de navigation), ce qui cachait le contenu en bas. - Remplace h-screen (100vh) par h-[100dvh] (dynamic viewport height) - Ajoute viewport-fit=cover pour préparer le support safe-area iOS
2026-03-26 16:35:00 +01:00
2 changed files with 3 additions and 3 deletions
--- a/assets/vue/app/shared/components/layout/Layout.vue
+++ b/assets/vue/app/shared/components/layout/Layout.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="h-screen overflow-hidden bg-gray-50 dark:bg-gray-900 flex">
+    <div class="h-[100dvh] overflow-hidden bg-gray-50 dark:bg-gray-900 flex">
        <Header
            :show-menu-button="isReaderMode"
            @menu-click="toggleSidebar"
@@ -16,7 +16,7 @@
            headerStore.shouldShowHeader ? 'mt-16' : 'mt-0',
            isReaderMode ? '' : 'md:ml-60'
        ]" style="transition: margin-top 300ms ease-in-out;">
-            <RouterView class="flex-1 min-h-0"></RouterView>
+            <RouterView></RouterView>
        </main>
    </div>
 </template>
--- a/templates/vue/index.html.twig
+++ b/templates/vue/index.html.twig
@@ -2,7 +2,7 @@
 <html>
    <head>
        <meta charset="UTF-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover">
        <title>Vue App</title>
        {{ encore_entry_link_tags('vue-app') }}
    </head>