style

frontend/src/documents/DocumentsTable.jsx

@@ -76,6 +76,7 @@ const DocumentsTable = ({
   onDocumentTagDrop,
   viewMode = 'list',
   onViewModeChange,
+  onClearSelection,
 }) => {
   const showingSearchResults = searchResults !== null;
   const rows = showingSearchResults ? searchResults : documents;
@@ -213,6 +214,16 @@ const DocumentsTable = ({
     [isTagDragEvent, onDocumentTagDrop],
   );
 
+  const handleGridBackgroundClick = useCallback(
+    (event) => {
+      if (event.target !== event.currentTarget) {
+        return;
+      }
+      onClearSelection?.();
+    },
+    [onClearSelection],
+  );
+
   return (
     <section
       className={`documents-panel column documents-panel--view-${isGridView ? 'grid' : 'list'}`}
@@ -307,7 +318,11 @@ const DocumentsTable = ({
               Drop files anywhere or onto a folder to upload documents.
             </div>
           ) : isGridView ? (
-            <div className="documents-grid" role="list">
+            <div
+              className="documents-grid"
+              role="list"
+              onClick={handleGridBackgroundClick}
+            >
               {!showingSearchResults &&
                 subfolders.map((folder) => {
                   const canDragFolder = folder.id !== 'root';
@@ -353,7 +368,7 @@ const DocumentsTable = ({
                       }}
                     >
                       <div className="folder-card__icon">
-                        <FolderIcon className="icon-inline" size={32} />
+                        <FolderIcon className="folder-card__icon-svg" size={128} />
                       </div>
                       <div className="folder-card__meta">
                         <div className="folder-card__name" title={folder.name}>
@@ -756,7 +771,7 @@ const DocumentsTable = ({
       )}
     </section>
   );
-};
+}; 
 
 export default DocumentsTable;
 export { DocumentThumbnailImage };

frontend/src/index.jsx

@@ -1246,6 +1246,11 @@ const AppLayout = () => {
     [handleRowSelection],
   );
 
+  const clearDocumentSelection = useCallback(() => {
+    setFocusedRowKey(null);
+    applySelection([], { anchor: null, interactedKeys: [] });
+  }, [applySelection]);
+
   const handleFolderRowClick = useCallback(
     (folderId, event) => {
       const rowKey = resolveFolderRowKey(folderId);
@@ -4522,6 +4527,7 @@ const AppLayout = () => {
     onDocumentTagDrop: handleDocumentTagDrop,
     viewMode: documentsViewMode,
     onViewModeChange: handleDocumentsViewModeChange,
+    onClearSelection: clearDocumentSelection,
   };
 
   const detailPanelProps = {

frontend/src/styles.css

@@ -1309,7 +1309,7 @@ button.icon-button.ghost:hover:not([disabled]) {
 .documents-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
-  gap: 0.2rem 1.3rem;
+  gap: 0.3rem 1.3rem;
   padding: 0;
 }
 
@@ -1317,7 +1317,7 @@ button.icon-button.ghost:hover:not([disabled]) {
   padding: 0rem;
   display: flex;
   flex-direction: column;
-  gap: 0.1rem;
+  gap: 0.3rem;
   cursor: pointer;
   align-items: center;
   text-align: center;
@@ -1364,6 +1364,7 @@ button.icon-button.ghost:hover:not([disabled]) {
   display: flex;
   flex-wrap: wrap;
   gap: 0.25rem;
+  justify-content: center;
 }
 
 .folder-card {
@@ -1375,11 +1376,16 @@ button.icon-button.ghost:hover:not([disabled]) {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 100%;
-  aspect-ratio: 1;
+  width: 128px;
+  height: 128px;
   color: var(--accent);
 }
 
+.folder-card__icon-svg {
+  width: 100%;
+  height: 100%;
+}
+
 .folder-card__meta {
   display: flex;
   flex-direction: column;
@@ -1396,16 +1402,6 @@ button.icon-button.ghost:hover:not([disabled]) {
   white-space: nowrap;
 }
 
-.folder-card__badge {
-  display: inline-flex;
-  align-self: center;
-  padding: 0.12rem 0.45rem;
-  font-size: 0.72rem;
-  border-radius: 999px;
-  background: var(--surface-soft);
-  color: var(--muted);
-  border: 1px solid var(--border);
-}
 
 .doc-name__title {
   font-weight: 600;