Grid optimizations

CHANGELOG.md

@@ -11,6 +11,8 @@
 
 ### ⚡️ Optimizations
 
+- Dashboard layout grid optimizations
+
 ### 🐞 Fixes
 
 - [#685](https://github.com/estruyf/vscode-front-matter/issues/685): Fix when using non-string values in the tag picker

src/dashboardWebView/components/Contents/Contents.tsx

@@ -37,7 +37,7 @@ export const Contents: React.FunctionComponent<IContentsProps> = ({
 
   return (
     <PageLayout folders={pageFolders} totalPages={pageItems.length}>
-      <div className="w-full flex-grow max-w-7xl mx-auto pb-6 px-4">
+      <div className="w-full flex-grow max-w-full mx-auto pb-6 px-4">
         {loading ? <Spinner /> : <Overview pages={pageItems} settings={settings} />}
       </div>
 

src/dashboardWebView/components/Contents/Item.tsx

@@ -91,7 +91,7 @@ export const Item: React.FunctionComponent<IItemProps> = ({
                   <img
                     src={`${pageData[PREVIEW_IMAGE_FIELD]}`}
                     alt={escapedTitle || ""}
-                    className="absolute inset-0 h-full w-full object-cover group-hover:brightness-75"
+                    className="absolute inset-0 h-full w-full object-cover object-left-top group-hover:brightness-75"
                     loading="lazy"
                   />
                 ) : (

src/dashboardWebView/components/Contents/List.tsx

@@ -16,7 +16,7 @@ export const List: React.FunctionComponent<IListProps> = ({
 
   let className = '';
   if (view === DashboardViewType.Grid) {
-    className = `grid grid-cols-2 gap-x-4 gap-y-8 sm:grid-cols-3 sm:gap-x-6 lg:grid-cols-4 xl:gap-x-8`;
+    className = `grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4`;
   } else if (view === DashboardViewType.List) {
     className = `-mx-4`;
   }

src/dashboardWebView/components/Layout/PageLayout.tsx

@@ -26,7 +26,7 @@ export const PageLayout: React.FunctionComponent<IPageLayoutProps> = ({
       <div
         className={
           contentClass ||
-          'w-full flex justify-between flex-col flex-grow max-w-7xl mx-auto pt-6 px-4'
+          'w-full flex justify-between flex-col flex-grow mx-auto pt-6 px-4 max-w-full xl:max-w-[90%]'
         }
       >
         {children}

src/dashboardWebView/components/Media/List.tsx

@@ -8,12 +8,12 @@ export const List: React.FunctionComponent<IListProps> = ({
   gap,
   children
 }: React.PropsWithChildren<IListProps>) => {
-  const gapClass = gap !== undefined ? `gap-y-${gap}` : `gap-y-8`;
+  const gapClass = gap !== undefined ? `gap-y-${gap}` : ``;
 
   return (
     <ul
       role="list"
-      className={`grid grid-cols-2 gap-x-4 ${gapClass} sm:grid-cols-3 sm:gap-x-6 lg:grid-cols-4 xl:gap-x-8`}
+      className={`grid gap-4 ${gapClass} grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5`}
     >
       {children}
     </ul>