🎨 Adjusted dimensions of pin detail page (for mister Delobel 🧑‍💻)

src/app/components/pin-detail/pin-detail.component.css

@@ -27,11 +27,33 @@
   box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
     0 4px 6px -4px rgba(0, 0, 0, 0.1);
   padding: 2.5rem;
-  max-width: 48rem;
-  width: 100%;
+  max-width: 80vw;
+  max-height: 80vh;
+  width: 80vw;
+  height: 80vh;
   transition: box-shadow 0.3s ease-in-out;
+  display: flex;
+  flex-direction: column;
 }
 
 .card-pin-detail:hover {
   box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
 }
+
+.carousel-max {
+  width: 90vw;
+  height: 90vh;
+  max-width: 90vw;
+  max-height: 90vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.carousel-flex {
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

src/app/components/pin-detail/pin-detail.component.html

@@ -1,5 +1,5 @@
 <!-- Conteneur principal -->
-<div class="min-h-screen bg-gray-100 px-4 py-12 overflow-y-auto">
+<div class="min-h-[92vh] bg-gray-100 px-4 py-12 overflow-y-auto">
   <!-- .pin-detail agit comme conteneur vertical -->
   <div class="pin-detail">
     <div class="card-pin-detail" *ngIf="pin">
@@ -21,14 +21,14 @@
       <!-- Carousel -->
       <div
         *ngIf="pin.files.length > 0; else noImagesPlaceholder"
-        class="relative mt-2 mb-4 overflow-hidden rounded-lg flex items-center justify-center"
-        [ngClass]="{ 'h-32 sm:h-40 md:h-52 lg:h-60': true }"
+        class="relative mt-2 mb-4 overflow-hidden rounded-lg carousel-flex"
+        [ngClass]="{ 'h-32 sm:h-40 md:h-52 lg:h-60': false }"
       >
         <!-- Images -->
         <div
           *ngFor="let imageId of pin.files; let index = index"
           [class]="
-            'absolute inset-0 transition-opacity duration-700 ease-in-out' +
+            'absolute inset-0 transition-opacity duration-700 ease-in-out w-full h-full' +
             (index === currentIndex ? ' opacity-100' : ' opacity-0')
           "
         >
@@ -38,7 +38,7 @@
             <img
               [src]="imageUrls[index]"
               [hidden]="!imagesLoaded"
-              class="object-contain max-h-full max-w-full h-full w-auto mx-auto"
+              class="object-contain mx-auto w-full h-full max-w-[80vw] max-h-[80vh]"
             />
             <div
               *ngIf="!imagesLoaded"
@@ -95,7 +95,7 @@
         </ng-container>
       </div>
 
-      <!-- Fallback si pas d’image -->
+      <!-- Fallback si pas d'image -->
       <ng-template #noImagesPlaceholder>
         <div
           class="relative mt-2 overflow-hidden rounded-lg flex items-center justify-center bg-gray-200"