rename

frontend/src/styles.css

@@ -752,13 +752,13 @@ button.danger:hover:not([disabled]) {
   min-height: 0;
 }
 
-.preview-workspace {
+.document-viewer {
   flex: 1;
   display: grid;
   grid-template-columns: minmax(0, 30em) minmax(0, 1fr);
   gap: 1.5rem;
   min-height: 0;
-  padding: 1rem 1.5rem;
+  padding: 1rem 1rem;
 }
 
 .document-drag-preview {
@@ -859,7 +859,7 @@ button.danger:hover:not([disabled]) {
   pointer-events: none;
 }
 
-.preview-workspace__details {
+.document-viewer__details {
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
@@ -937,23 +937,32 @@ button.danger:hover:not([disabled]) {
   font-size: 0.8rem;
 }
 
-.preview-workspace__viewer {
+.document-viewer__viewport {
   flex: 1;
   min-width: 0;
-  background: var(--surface-subtle);
-  box-shadow: inset 0 0 0 1px var(--outline-subtle);
   display: flex;
   position: relative;
   overflow: hidden;
+  align-items: flex-start;
 }
 
-.preview-workspace__object {
+.document-viewer__object {
   width: 100%;
   height: 100%;
   border: none;
   background: #fff;
 }
 
+.document-viewer__object--image {
+  width: auto;
+  height: auto;
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  background: var(--surface);
+  align-self: flex-start;
+}
+
 .tags-panel__body {
   overflow-y: auto;
 }
@@ -1128,7 +1137,7 @@ button.danger:hover:not([disabled]) {
   min-height: 32px;
 }
 
-.preview-workspace__message {
+.document-viewer__message {
   position: absolute;
   top: 50%;
   left: 50%;