fix onclick events get passed to a tags

components/FolderGridLayout.tsx

@@ -81,7 +81,7 @@ const FolderGridLayout = ({
             checked={totalSelected}
             onChange={toggleTotalSelected}
             indeterminate={true}
-            title={'Select files'}
+            title={'Select all files'}
           />
           {totalGenerating ? (
             <Downloading title="Downloading selected files, refresh page to cancel" />
@@ -98,10 +98,9 @@ const FolderGridLayout = ({
         </div>
       </div>
 
-      <div className="grid grid-cols-3 gap-3 p-3 md:grid-cols-4">
+      <div className="grid grid-cols-2 gap-3 p-3 md:grid-cols-4">
         {folderChildren.map((c: OdFolderChildren) => (
-          <Link key={c.id} href={`${path === '/' ? '' : path}/${encodeURIComponent(c.name)}`} passHref>
-            <a className="group relative overflow-hidden rounded hover:bg-gray-100 dark:hover:bg-gray-850">
+          <div key={c.id} className="group relative overflow-hidden rounded hover:bg-gray-100 dark:hover:bg-gray-850">
             <div className="absolute top-0 right-0 z-10 m-1 rounded bg-white/50 py-0.5 dark:bg-gray-900/50">
               {c.folder ? (
                 <div>
@@ -165,9 +164,12 @@ const FolderGridLayout = ({
               )}
             </div>
 
+            <Link href={`${path === '/' ? '' : path}/${encodeURIComponent(c.name)}`} passHref>
+              <a>
                 <GridItem c={c} />
               </a>
             </Link>
+          </div>
         ))}
       </div>
     </div>