From 15cb59e420c9362e9b769cb644e8cc47512bc886 Mon Sep 17 00:00:00 2001
From: "ext.jeremy.guillot@maxicoffee.domains" <j.guillot_ext@maxicoffee.com>
Date: Fri, 13 Mar 2026 19:32:45 +0100
Subject: [PATCH] =?UTF-8?q?style:=20scrollbar=20isol=C3=A9e=20dans=20la=20?=
 =?UTF-8?q?zone=20de=20contenu=20+=20suppression=20des=20fl=C3=A8ches?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Layout: h-screen overflow-hidden, <main> flex-col avec mt-16
- Pages avec toolbar: toolbar hors du conteneur scrollable (flex-col + overflow-y-auto flex-1)
- Pages sans toolbar: wrapper overflow-y-auto h-full
- app.scss: scrollbar-width/color limité à Firefox via @supports (-moz-appearance: none) pour éviter le conflit avec les pseudo-éléments webkit sur Chrome 121+
- Suppression des flèches de scrollbar via ::-webkit-scrollbar-button
- html/body overflow:hidden pour éviter la double scrollbar
---
 assets/styles/app.scss                        | 32 +++++++++++++++++++
 .../presentation/pages/ActivityPage.vue       |  2 +-
 .../presentation/pages/ConversionPage.vue     |  4 +--
 .../presentation/pages/NewImportPage.vue      |  4 +--
 .../manga/presentation/pages/HomePage.vue     |  6 ++--
 .../manga/presentation/pages/MangaDetails.vue | 10 ++++--
 .../pages/ScrapperConfigurations.vue          |  6 ++--
 .../presentation/pages/ScrapperEdit.vue       |  6 ++--
 .../pages/UserPreferencesPage.vue             |  4 +--
 .../app/shared/components/layout/Layout.vue   |  4 +--
 .../vue/app/shared/components/ui/Toolbar.vue  |  1 -
 11 files changed, 60 insertions(+), 19 deletions(-)

diff --git a/assets/styles/app.scss b/assets/styles/app.scss
index 5944f6e..982e96f 100644
--- a/assets/styles/app.scss
+++ b/assets/styles/app.scss
@@ -3,6 +3,11 @@
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
 
+html, body {
+    overflow: hidden;
+    height: 100%;
+}
+
 body {
     background-color: white;
 }
@@ -82,6 +87,33 @@ body {
     @apply bg-gray-700;
 }
 
+/* Firefox uniquement — évite le conflit avec les pseudo-éléments webkit sur Chrome 121+ */
+@supports (-moz-appearance: none) {
+    * {
+        scrollbar-width: thin;
+        scrollbar-color: #16a34a transparent;
+    }
+
+    .dark * {
+        scrollbar-color: #16a34a #1f2937;
+    }
+}
+
+/* Dark mode — webkit track */
+.dark ::-webkit-scrollbar-track {
+    @apply bg-gray-800;
+}
+
+/* Supprime les flèches de la scrollbar */
+::-webkit-scrollbar-button:start:decrement,
+::-webkit-scrollbar-button:end:increment,
+::-webkit-scrollbar-button:start:increment,
+::-webkit-scrollbar-button:end:decrement {
+    display: none;
+    width: 0;
+    height: 0;
+}
+
 ///* Custom styles for the scrollbar buttons */
 //::-webkit-scrollbar-button {
 //    @apply bg-gray-700;
diff --git a/assets/vue/app/domain/activity/presentation/pages/ActivityPage.vue b/assets/vue/app/domain/activity/presentation/pages/ActivityPage.vue
index c1b71bf..460b85b 100644
--- a/assets/vue/app/domain/activity/presentation/pages/ActivityPage.vue
+++ b/assets/vue/app/domain/activity/presentation/pages/ActivityPage.vue
@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div class="overflow-y-auto h-full">
         <Toolbar :config="toolbarConfig" class="mb-6" />
 
         <div v-if="activityStore.loading" class="flex justify-center py-8">
diff --git a/assets/vue/app/domain/conversion/presentation/pages/ConversionPage.vue b/assets/vue/app/domain/conversion/presentation/pages/ConversionPage.vue
index 2ec0e5d..35574a0 100644
--- a/assets/vue/app/domain/conversion/presentation/pages/ConversionPage.vue
+++ b/assets/vue/app/domain/conversion/presentation/pages/ConversionPage.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="container mx-auto px-4 py-8 max-w-4xl">
+  <div class="overflow-y-auto h-full"><div class="container mx-auto px-4 py-8 max-w-4xl">
     <!-- En-tête -->
     <div class="mb-8">
       <div class="flex items-center space-x-3 mb-4">
@@ -150,7 +150,7 @@
         <XMarkIcon class="w-4 h-4" />
       </button>
     </div>
-  </div>
+  </div></div>
 </template>
 
 <script>
diff --git a/assets/vue/app/domain/import/presentation/pages/NewImportPage.vue b/assets/vue/app/domain/import/presentation/pages/NewImportPage.vue
index a215478..4904204 100644
--- a/assets/vue/app/domain/import/presentation/pages/NewImportPage.vue
+++ b/assets/vue/app/domain/import/presentation/pages/NewImportPage.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="container mx-auto px-4 py-8">
+    <div class="overflow-y-auto h-full"><div class="container mx-auto px-4 py-8">
         <!-- Header -->
         <div class="mb-8">
             <h1 class="text-3xl font-bold text-gray-900 dark:text-gray-100 mb-2">Import de Bibliothèque</h1>
@@ -92,7 +92,7 @@
         <div v-if="store.allFilesProcessed" class="mt-8">
             <ImportResults />
         </div>
-    </div>
+    </div></div>
 </template>
 
 <script setup>
diff --git a/assets/vue/app/domain/manga/presentation/pages/HomePage.vue b/assets/vue/app/domain/manga/presentation/pages/HomePage.vue
index a365e1c..fd6a23b 100644
--- a/assets/vue/app/domain/manga/presentation/pages/HomePage.vue
+++ b/assets/vue/app/domain/manga/presentation/pages/HomePage.vue
@@ -1,6 +1,7 @@
 <template>
-    <div>
-        <Toolbar :config="toolbarConfig" class="sticky top-16 z-10" />
+    <div class="flex flex-col h-full">
+        <Toolbar :config="toolbarConfig" />
+        <div class="overflow-y-auto flex-1">
         <div class="container mx-auto px-4">
             <MangaGrid v-if="viewMode === 'grid'" :mangas="pagedItems" />
             <MangaList
@@ -22,6 +23,7 @@
                 Mise à jour en cours...
             </div>
         </div>
+        </div>
     </div>
 </template>
 
diff --git a/assets/vue/app/domain/manga/presentation/pages/MangaDetails.vue b/assets/vue/app/domain/manga/presentation/pages/MangaDetails.vue
index d8fe9f2..b653ed8 100644
--- a/assets/vue/app/domain/manga/presentation/pages/MangaDetails.vue
+++ b/assets/vue/app/domain/manga/presentation/pages/MangaDetails.vue
@@ -1,8 +1,12 @@
 <template>
-    <div class="min-h-screen bg-gray-50 dark:bg-gray-900">
+    <div class="flex flex-col h-full bg-gray-50 dark:bg-gray-900">
         <!-- Notifications Toast -->
         <NotificationToast />
 
+        <Toolbar v-if="currentManga" :config="toolbarConfig" />
+
+        <div class="overflow-y-auto flex-1">
+
         <div v-if="errorDetails" class="bg-red-100 dark:bg-red-900/20 border border-red-400 dark:border-red-700 text-red-700 dark:text-red-400 px-4 py-3 rounded mx-4 mt-4">
             {{ errorDetails.message || 'Une erreur est survenue lors du chargement des détails.' }}
         </div>
@@ -11,8 +15,6 @@
             <!-- Composant invisible qui écoute les mises à jour Mercure -->
             <MercureListener :manga-id="String(mangaId)" />
 
-            <Toolbar :config="toolbarConfig" class="sticky top-16 z-10" />
-
             <div v-if="isRefreshingDetails" class="absolute top-2 right-2 text-gray-500 dark:text-gray-400 z-20">
                 <ArrowPathIcon class="h-5 w-5 animate-spin" />
             </div>
@@ -87,6 +89,8 @@
         <div v-else class="text-center text-gray-500 dark:text-gray-400 py-10 px-4">
             Aucun manga sélectionné ou trouvé.
         </div>
+
+        </div>
     </div>
 </template>
 
diff --git a/assets/vue/app/domain/setting/presentation/pages/ScrapperConfigurations.vue b/assets/vue/app/domain/setting/presentation/pages/ScrapperConfigurations.vue
index c576024..a5739fa 100644
--- a/assets/vue/app/domain/setting/presentation/pages/ScrapperConfigurations.vue
+++ b/assets/vue/app/domain/setting/presentation/pages/ScrapperConfigurations.vue
@@ -1,7 +1,8 @@
 <template>
-    <div>
-        <Toolbar :config="toolbarConfig" class="sticky top-16 z-10" />
+    <div class="flex flex-col h-full">
+        <Toolbar :config="toolbarConfig" />
 
+        <div class="overflow-y-auto flex-1">
         <div class="container mx-auto px-4 py-6">
             <!-- Header -->
             <div class="mb-8">
@@ -71,6 +72,7 @@
                 Configuration exportée !
             </div>
         </div>
+        </div>
 
         <!-- Import Modal -->
         <div v-if="showImportModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
diff --git a/assets/vue/app/domain/setting/presentation/pages/ScrapperEdit.vue b/assets/vue/app/domain/setting/presentation/pages/ScrapperEdit.vue
index 586b4e7..ff5451b 100644
--- a/assets/vue/app/domain/setting/presentation/pages/ScrapperEdit.vue
+++ b/assets/vue/app/domain/setting/presentation/pages/ScrapperEdit.vue
@@ -1,7 +1,8 @@
 <template>
-    <div>
-        <Toolbar :config="toolbarConfig" class="sticky top-16 z-10" />
+    <div class="flex flex-col h-full">
+        <Toolbar :config="toolbarConfig" />
 
+        <div class="overflow-y-auto flex-1">
         <div class="container mx-auto px-4 py-6">
             <!-- Back Navigation -->
             <div class="mb-6">
@@ -180,6 +181,7 @@
                 Configuration {{ isEditing ? 'mise à jour' : 'créée' }} avec succès !
             </div>
         </div>
+        </div>
     </div>
 </template>
 
diff --git a/assets/vue/app/domain/setting/presentation/pages/UserPreferencesPage.vue b/assets/vue/app/domain/setting/presentation/pages/UserPreferencesPage.vue
index df0de6b..172f314 100644
--- a/assets/vue/app/domain/setting/presentation/pages/UserPreferencesPage.vue
+++ b/assets/vue/app/domain/setting/presentation/pages/UserPreferencesPage.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="container mx-auto px-4 py-8 max-w-3xl">
+    <div class="overflow-y-auto h-full"><div class="container mx-auto px-4 py-8 max-w-3xl">
         <div class="flex items-center justify-between mb-6">
             <div>
                 <h1 class="text-2xl font-bold text-gray-900 dark:text-white">{{ t('preferences.title') }}</h1>
@@ -175,7 +175,7 @@
                 </div>
             </div>
         </section>
-    </div>
+    </div></div>
 </template>
 
 <script setup>
diff --git a/assets/vue/app/shared/components/layout/Layout.vue b/assets/vue/app/shared/components/layout/Layout.vue
index 58062f4..cb81098 100644
--- 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="min-h-screen bg-gray-50 dark:bg-gray-900 flex">
+    <div class="h-screen overflow-hidden bg-gray-50 dark:bg-gray-900 flex">
         <Header
             :show-menu-button="isReaderMode"
             @menu-click="toggleSidebar"
@@ -12,7 +12,7 @@
             @add-manga-click="$emit('add-manga-click', $event)" />
 
         <main :class="[
-            'flex-1 pt-16',
+            'flex-1 mt-16 flex flex-col overflow-hidden',
             isReaderMode ? '' : 'md:ml-60'
         ]">
             <RouterView></RouterView>
diff --git a/assets/vue/app/shared/components/ui/Toolbar.vue b/assets/vue/app/shared/components/ui/Toolbar.vue
index 15b26df..44e1f74 100644
--- a/assets/vue/app/shared/components/ui/Toolbar.vue
+++ b/assets/vue/app/shared/components/ui/Toolbar.vue
@@ -18,7 +18,6 @@
             type: Object,
             required: true,
             validator: value => {
-                // Vérifie que leftSection et rightSection sont des tableaux
                 return Array.isArray(value.leftSection) && Array.isArray(value.rightSection);
             }
         }