From 0ea972e4f371fdcce7ac5de22971a08de2b3e5f8 Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Mon, 23 Oct 2023 11:13:03 +0200
Subject: [PATCH] Grid optimizations

---
 CHANGELOG.md                                          | 2 ++
 src/dashboardWebView/components/Contents/Contents.tsx | 2 +-
 src/dashboardWebView/components/Contents/Item.tsx     | 2 +-
 src/dashboardWebView/components/Contents/List.tsx     | 2 +-
 src/dashboardWebView/components/Layout/PageLayout.tsx | 2 +-
 src/dashboardWebView/components/Media/List.tsx        | 4 ++--
 6 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f81e3bc3..920a9ce8 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/src/dashboardWebView/components/Contents/Contents.tsx b/src/dashboardWebView/components/Contents/Contents.tsx
index 2c69012d..487df863 100644
--- a/src/dashboardWebView/components/Contents/Contents.tsx
+++ b/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>
 
diff --git a/src/dashboardWebView/components/Contents/Item.tsx b/src/dashboardWebView/components/Contents/Item.tsx
index 7d88bde2..c890a1e6 100644
--- a/src/dashboardWebView/components/Contents/Item.tsx
+++ b/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"
                   />
                 ) : (
diff --git a/src/dashboardWebView/components/Contents/List.tsx b/src/dashboardWebView/components/Contents/List.tsx
index f78db468..31aafc37 100644
--- a/src/dashboardWebView/components/Contents/List.tsx
+++ b/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`;
   }
diff --git a/src/dashboardWebView/components/Layout/PageLayout.tsx b/src/dashboardWebView/components/Layout/PageLayout.tsx
index 1ba33fc7..5c92d5bd 100644
--- a/src/dashboardWebView/components/Layout/PageLayout.tsx
+++ b/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}
diff --git a/src/dashboardWebView/components/Media/List.tsx b/src/dashboardWebView/components/Media/List.tsx
index 0df853bd..2df77458 100644
--- a/src/dashboardWebView/components/Media/List.tsx
+++ b/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>