pdfjs

frontend/src/styles/documents/viewer.css

@@ -376,11 +376,13 @@
   min-width: 0;
   display: flex;
   position: relative;
-  overflow: hidden;
+  overflow: auto;
   align-items: stretch;
   justify-content: flex-start;
   max-height: 100%;
   grid-area: viewport;
+  background: var(--surface-subtle);
+  padding: 0.75rem;
 }
 
 .document-viewer__object {
@@ -388,6 +390,13 @@
   border: none;
 }
 
+.document-viewer__object--pdf {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
 .document-viewer__object:not(.document-viewer__object--image) {
   height: 100%;
 }
@@ -398,6 +407,7 @@
   max-width: 100%;
   max-height: 100%;
   object-fit: contain;
+  margin: auto;
 }
 
 .document-viewer--stacked .document-viewer__object:not(.document-viewer__object--image) {
@@ -421,6 +431,66 @@
   background: var(--surface-subtle);
 }
 
+.pdf-viewer__canvas-stack {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  align-items: center;
+}
+
+.pdf-viewer__page-wrapper {
+  position: relative;
+  width: min(100%, 48rem);
+}
+
+.pdf-viewer__page {
+  display: block;
+  width: 100%;
+  height: auto;
+  box-shadow: 0 1.25rem 2.5rem -1.25rem var(--shadow-medium);
+  background: var(--surface);
+}
+
+.pdf-viewer__page-wrapper .textLayer {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  line-height: 1;
+  transform-origin: 0 0;
+  pointer-events: auto;
+  color: transparent;
+}
+
+.pdf-viewer__page-wrapper .textLayer span,
+.pdf-viewer__page-wrapper .textLayer br {
+  position: absolute;
+  white-space: pre;
+  transform-origin: 0 0;
+  cursor: text;
+}
+
+.pdf-viewer__page-wrapper .textLayer .endOfContent {
+  position: absolute;
+  inset: 100% 0 0;
+  pointer-events: none;
+}
+
+.pdf-viewer__status {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+  background: color-mix(in oklch, var(--surface) 85%, transparent);
+  pointer-events: none;
+}
+
+.pdf-viewer__status--error {
+  color: var(--danger);
+}
+
 .document-viewer__unsupported-filename {
   font-size: 0.9rem;
   color: var(--muted);