viewer

frontend/src/styles/documents/viewer.css

@@ -1,12 +1,42 @@
 .document-viewer {
   flex: 1;
   display: grid;
-  grid-template-columns: minmax(0, 30em) minmax(0, 1fr);
+  grid-template-columns: minmax(0, clamp(18rem, 30vw, 26rem)) minmax(0, 1fr);
+  grid-template-areas: 'details viewport';
+  align-items: stretch;
   gap: 1rem;
   min-height: 0;
   padding: 1rem 1rem;
 }
 
+.document-viewer--stacked {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  grid-template-rows:
+    minmax(auto, 1fr)
+    auto;
+  grid-template-areas:
+    'viewport'
+    'details';
+  gap: 0.5rem;
+  padding: 0.5rem;
+  overflow: auto;
+}
+
+.document-viewer--stacked .document-viewer__viewport {
+  width: 100%;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: stretch;
+  max-height: calc(var(--document-viewer-portrait-height-ratio) * 100vh);
+}
+
+.document-viewer--stacked .document-viewer__details-pane {
+  overflow: visible;
+}
+
 .document-drag-preview {
   position: fixed;
   pointer-events: none;
@@ -125,6 +155,7 @@
   min-height: 0;
   overflow: auto;
   flex: 1;
+  grid-area: details;
 }
 .document-viewer__tabs-wrapper {
   display: flex;
@@ -289,22 +320,29 @@
   display: flex;
   position: relative;
   overflow: hidden;
-  align-items: flex-start;
+  align-items: stretch;
+  justify-content: center;
+  grid-area: viewport;
 }
 
 .document-viewer__object {
   width: 100%;
-  height: 100%;
   border: none;
 }
 
+.document-viewer__object:not(.document-viewer__object--image) {
+  height: 100%;
+}
+
+
+
+
 .document-viewer__object--image {
   width: auto;
   height: auto;
   max-width: 100%;
   max-height: 100%;
   object-fit: contain;
-  align-self: flex-start;
 }
 
 .document-viewer__unsupported {