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 };