feat(dees-pdf-viewer): optimize thumbnail rendering and styles for improved layout and responsiveness

ts_web/elements/dees-pdf-viewer/styles.ts

@@ -161,9 +161,7 @@ export const viewerStyles = [
       flex: 1;
       overflow-y: auto;
       padding: 12px;
-      display: flex;
-      flex-direction: column;
-      gap: 12px;
+      display: block;
       overscroll-behavior: contain;
       min-height: 0;
     }
@@ -175,11 +173,16 @@ export const viewerStyles = [
       cursor: pointer;
       border: 2px solid transparent;
       transition: border-color 0.15s ease;
-      background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(215 20% 18%)')};
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      min-height: 100px;
+      background: ${cssManager.bdTheme('hsl(0 0% 95%)', 'hsl(215 20% 18%)')};
+      display: block;
+      width: 100%;
+      margin-bottom: 12px;
+      /* Default A4 aspect ratio (297mm / 210mm ≈ 1.414) */
+      min-height: calc(176px * 1.414);
+    }
+
+    .thumbnail:last-child {
+      margin-bottom: 0;
     }
 
     .thumbnail:hover {
@@ -192,7 +195,7 @@ export const viewerStyles = [
 
     .thumbnail-canvas {
       display: block;
-      max-width: 100%;
+      width: 100%;
       height: auto;
       image-rendering: -webkit-optimize-contrast;
       image-rendering: crisp-edges;