Enhancement: configurable dashboard grid #737

CHANGELOG.md

@@ -9,6 +9,7 @@
 ### 🎨 Enhancements
 
 - [#727](https://github.com/estruyf/vscode-front-matter/pull/727): Updated Japanese translations thanks to [mayumihara](https://github.com/mayumih387)
+- [#737](https://github.com/estruyf/vscode-front-matter/issues/737): Optimize the grid layout of the content and media dashboards
 
 ### ⚡️ Optimizations
 

src/dashboardWebView/components/Contents/Contents.tsx

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

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-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4`;
+    className = `grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 2xl: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 mx-auto pt-6 px-4 max-w-full xl:max-w-[90%]'
+          'w-full flex justify-between flex-col flex-grow mx-auto pt-6 px-4 max-w-full'
         }
       >
         {children}

src/dashboardWebView/components/Media/List.tsx

@@ -13,7 +13,7 @@ export const List: React.FunctionComponent<IListProps> = ({
   return (
     <ul
       role="list"
-      className={`grid gap-4 ${gapClass} grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5`}
+      className={`grid gap-4 ${gapClass} grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 2xl:grid-cols-5`}
     >
       {children}
     </ul>

src/localization/localization.enum.ts

@@ -700,7 +700,7 @@ export enum LocalizationKey {
    */
   dashboardMediaMediaFolderDefault = 'dashboard.media.media.folder.default',
   /**
-   * No media files to show. You can drag & drop new files by holding your [shift] key.
+   * No media files to show. You can drag&drop new files by holding your [shift] key.
    */
   dashboardMediaMediaPlaceholder = 'dashboard.media.media.placeholder',
   /**