guts

frontend/src/styles/detail/detail-panels.css

@@ -60,11 +60,24 @@
   flex: 1;
   display: flex;
   flex-direction: column;
-  overflow-y: auto;
   min-height: 0;
   padding: 0;
 }
 
+.detail-panel__content {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+}
+
+.detail-panel__content .document-viewer-panel {
+  flex: 1;
+}
+
+.detail-panel__content .document-viewer-panel__body {
+  padding: 0.5rem 1rem;
+}
+
 .detail-section__header {
   display: flex;
   align-items: center;

frontend/src/styles/documents/viewer.css

@@ -1,3 +1,24 @@
+.document-viewer-panel {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  background: var(--bg);
+}
+
+.document-viewer-panel__body {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  padding: 0;
+  overflow: auto;
+}
+
+.document-viewer-panel__body > .document-viewer,
+.document-viewer-panel__body > .document-viewer--loading {
+  flex: 1;
+}
+
 .document-viewer {
   flex: 1;
   display: grid;
@@ -10,14 +31,8 @@
 }
 
 .document-viewer--stacked {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr);
-  grid-template-rows:
-    minmax(auto, 1fr)
-    auto;
-  grid-template-areas:
-    'viewport'
-    'details';
+  display: flex;
+  flex-direction: column;
   gap: 0.5rem;
   padding: 0.5rem;
   overflow: auto;
@@ -25,16 +40,19 @@
 
 .document-viewer--stacked .document-viewer__viewport {
   width: 100%;
-  margin: 0;
   display: flex;
   flex-direction: column;
-  justify-content: flex-start;
-  align-items: stretch;
+  justify-content: center;
+  align-items: center;
+  flex: 2 2 auto;
   max-height: calc(var(--document-viewer-portrait-height-ratio) * 100vh);
+  order: -1;
 }
 
 .document-viewer--stacked .document-viewer__details-pane {
-  overflow: visible;
+  flex: 1 1 auto;
+  overflow: auto;
+  order: 0;
 }
 
 .document-drag-preview {
@@ -322,6 +340,7 @@
   overflow: hidden;
   align-items: stretch;
   justify-content: center;
+  max-height: 100%;
   grid-area: viewport;
 }
 
@@ -334,9 +353,6 @@
   height: 100%;
 }
 
-
-
-
 .document-viewer__object--image {
   width: auto;
   height: auto;
@@ -345,6 +361,15 @@
   object-fit: contain;
 }
 
+.document-viewer--stacked .document-viewer__object:not(.document-viewer__object--image) {
+  height: calc(var(--document-viewer-portrait-height-ratio) * 100vh);
+  max-height: 100%;
+}
+
+.document-viewer--stacked .document-viewer__object--image {
+  height: auto;
+}
+
 .document-viewer__unsupported {
   height: 100%;
   width: 100%;