feat: ajout de la gestion de l'auto-hide du header et amélioration de la réactivité des composants en fonction de la taille de la fenêtre, ainsi que des optimisations CSS pour une meilleure expérience utilisateur sur mobile.

assets/vue/app/domain/reader/presentation/components/ReaderPage.vue

@@ -14,7 +14,7 @@
 </template>
 
 <script setup>
-    import { computed, ref, onMounted } from 'vue';
+    import { computed, onMounted, onUnmounted, ref } from 'vue';
 
     const props = defineProps({
         pageData: {
@@ -34,6 +34,7 @@
     const imageRef = ref(null);
     const naturalWidth = ref(0);
     const naturalHeight = ref(0);
+    const windowWidth = ref(window.innerWidth);
 
     const imageSource = computed(() => {
         if (!props.pageData?.base64Content || !props.pageData?.mimeType) {
@@ -49,19 +50,19 @@
         }
     };
 
-    // Calculer la largeur maximale en fonction de la hauteur de la fenêtre
+        // Calculer la largeur maximale en fonction de la largeur disponible
     const maxWidth = computed(() => {
         if (!naturalWidth.value || !naturalHeight.value) return null;
 
-        // On prend 70% de la largeur de la fenêtre comme largeur maximale
-        const maxWidthPx = window.innerWidth * 0.7;
+        const availableWidth = windowWidth.value;
 
-        // Si l'image est plus petite que la largeur maximale, on garde sa taille naturelle
-        if (naturalWidth.value <= maxWidthPx) {
-            return naturalWidth.value;
+        // Si la largeur disponible est < 1200px : utiliser 95% de la largeur
+        if (availableWidth < 1200) {
+            return Math.min(naturalWidth.value, availableWidth * 0.95);
         }
 
-        return maxWidthPx;
+        // Si la largeur disponible est >= 1200px : limiter à 1200px maximum
+        return Math.min(naturalWidth.value, 1200);
     });
 
     const imageStyle = computed(() => {
@@ -74,10 +75,20 @@
         };
     });
 
+    // Gestion du redimensionnement de la fenêtre
+    const handleResize = () => {
+        windowWidth.value = window.innerWidth;
+    };
+
     onMounted(() => {
         if (imageRef.value && imageRef.value.complete) {
             handleImageLoad();
         }
+        window.addEventListener('resize', handleResize);
+    });
+
+    onUnmounted(() => {
+        window.removeEventListener('resize', handleResize);
     });
 </script>
 
@@ -85,13 +96,20 @@
     .page-container {
         @apply flex-1 flex items-center justify-center overflow-hidden;
         transform-origin: center;
+        /* Réduction des marges sur mobile */
+        @apply p-0 sm:p-2;
     }
 
     .page-image {
-        @apply max-w-full max-h-full object-contain;
+        @apply object-contain;
+        /* La largeur est gérée par le JavaScript, on garde juste les contraintes max */
+        max-width: 100%;
+        max-height: 100%;
     }
 
     .error {
         @apply text-red-500 text-xl;
     }
 </style>
+
+