thumbnails

frontend/src/documents/DocumentsTable.jsx

@@ -67,8 +67,9 @@ const DocumentThumbnailImage = ({ document, ensureAssetUrl, getDocumentAsset, al
     [document, ensureAssetUrl, getDocumentAsset],
   );
 
-  if (url) {
   return (
+    <div className="document-thumbnail-wrapper">
+      {url ? (
         <img
           src={url}
           alt={alt || ''}
@@ -76,10 +77,11 @@ const DocumentThumbnailImage = ({ document, ensureAssetUrl, getDocumentAsset, al
           draggable={false}
           onDragStart={(event) => event.preventDefault()}
         />
+      ) : (
+        <div className="thumb-placeholder">DOC</div>
+      )}
+    </div>
   );
-  }
-
-  return <div className="thumb-placeholder">DOC</div>;
 };
 
 const DocumentsTable = ({

frontend/src/styles.css

@@ -919,18 +919,29 @@ button.icon-button.ghost:hover:not([disabled]) {
   text-align: center;
 }
 
-.document-thumbnail {
+.document-thumbnail-wrapper {
-  width: 36px;
+  width: 48px;
   height: 48px;
-  object-fit: cover;
+  background: transparent;
-  border-radius: 3px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.document-thumbnail {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  background: var(--surface-subtle);
+  border-radius: 1px;
   box-shadow: 0 1px 3px var(--shadow-medium);
 }
 
 .thumb-placeholder {
-  width: 36px;
+  width: 100%;
-  height: 48px;
+  height: 100%;
   border-radius: 1px;
+  background: var(--surface-subtle);
   color: var(--muted);
   display: inline-flex;
   align-items: center;
@@ -938,6 +949,7 @@ button.icon-button.ghost:hover:not([disabled]) {
   font-size: 0.68rem;
   font-weight: 600;
   letter-spacing: 0.08em;
+  box-shadow: 0 1px 3px var(--shadow-medium);
 }
 
 .thumb-placeholder.icon {