feat: Introduce MediaViewer component to centralize media rendering and refactor document preview and zoom overlay to use it, along with new CSS padding variables.

frontend/src/styles/base/theme.css

@@ -111,7 +111,7 @@
   --detail-panel-width: calc(100vw / 3);
   --sidebar-width: 20em;
   --documents-grid-title-size: 0.8rem;
-
+  --media-viewer-padding: 0.75rem;
 }
 
 :root[data-theme='light'] {

frontend/src/styles/documents/viewer.css

@@ -382,7 +382,9 @@
   max-height: 100%;
   grid-area: viewport;
   background: var(--surface-subtle);
-  --pdf-viewer-stack-padding: 0.75rem;
+  padding: 1.5vmin;
+  box-sizing: border-box;
+  --pdf-viewer-stack-padding: 1.5vmin;
 }
 
 .document-viewer__object {
@@ -458,7 +460,6 @@
   align-items: center;
   --pdf-viewer-viewport-width: 100%;
   --pdf-viewer-viewport-height: 100%;
-  padding: var(--pdf-viewer-stack-padding, 0);
   width: 100%;
   box-sizing: border-box;
 }
@@ -481,9 +482,9 @@
 }
 
 .pdf-viewer__canvas-stack--fit-width .pdf-viewer__page-wrapper--limit-width {
-  width: var(--pdf-viewer-page-width, 100%);
+  width: 100%;
   height: auto;
-  aspect-ratio: calc(var(--pdf-viewer-page-width) / var(--pdf-viewer-page-height));
+  aspect-ratio: var(--pdf-viewer-page-aspect, calc(var(--pdf-viewer-page-width) / var(--pdf-viewer-page-height)));
 }
 
 .pdf-viewer__canvas-stack--contain .pdf-viewer__page-wrapper--limit-height {

frontend/src/styles/preview/preview-zoom.css

@@ -26,6 +26,7 @@
   max-width: 99vw;
   max-height: 99vh;
   z-index: 3000000;
+  --preview-padding: 1.5vmin;
 }
 
 .preview-zoom__stage--pdf {
@@ -61,7 +62,7 @@
   overflow: auto;
   align-items: flex-start;
   justify-content: center;
-  --pdf-viewer-stack-padding: 1vh;
+  --pdf-viewer-stack-padding: var(--preview-padding);
 }
 
 .preview-zoom__scroll:focus {
@@ -102,4 +103,4 @@
   z-index: -1;
   pointer-events: none;
   border-radius: inherit;
-}
+}