thumbnails

frontend/src/documents/DocumentsTable.jsx

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

frontend/src/styles.css

@@ -919,18 +919,29 @@ button.icon-button.ghost:hover:not([disabled]) {
   text-align: center;
 }
 
-.document-thumbnail {
-  width: 36px;
+.document-thumbnail-wrapper {
+  width: 48px;
   height: 48px;
-  object-fit: cover;
-  border-radius: 3px;
+  background: transparent;
+  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;
-  height: 48px;
+  width: 100%;
+  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 {