From d62d55a42f3ef5e3a6733e66b52446547ff62e58 Mon Sep 17 00:00:00 2001
From: Webysther Sperandio <webysther@gmail.com>
Date: Wed, 12 Feb 2025 14:42:38 +0100
Subject: [PATCH] Fix screen large items (#472)

* Update Container.vue to allow max 7 for xl

* Update items.vue to allow 5 cols to large screen

* Change to use pageSize to 30

Least common multiple is 30 for cols if 2, 3 or 5.

---------

Co-authored-by: Matt Kilgore <tankerkiller125@users.noreply.github.com>
---
 frontend/components/Base/Container.vue | 2 +-
 frontend/pages/items.vue               | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/components/Base/Container.vue b/frontend/components/Base/Container.vue
index bf5e7c5c..097d59d5 100644
--- a/frontend/components/Base/Container.vue
+++ b/frontend/components/Base/Container.vue
@@ -8,7 +8,7 @@
 </script>
 
 <template>
-  <component :is="cmp" class="container mx-auto mt-10 max-w-6xl px-3">
+  <component :is="cmp" class="container mx-auto mt-10 max-w-7xl px-3">
     <slot />
   </component>
 </template>
diff --git a/frontend/pages/items.vue b/frontend/pages/items.vue
index dbd34e9b..779dadc0 100644
--- a/frontend/pages/items.vue
+++ b/frontend/pages/items.vue
@@ -35,7 +35,7 @@
     },
   });
 
-  const pageSize = useRouteQuery("pageSize", 21);
+  const pageSize = useRouteQuery("pageSize", 30);
   const query = useRouteQuery("q", "");
   const advanced = useRouteQuery("advanced", false);
   const includeArchived = useRouteQuery("archived", false);
@@ -507,7 +507,7 @@
         <MdiSelectSearch class="size-10" />
         <p>{{ $t("items.no_results") }}</p>
       </div>
-      <div v-else ref="cardgrid" class="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3">
+      <div v-else ref="cardgrid" class="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5">
         <ItemCard v-for="item in items" :key="item.id" :item="item" :location-flat-tree="locationFlatTree" />
       </div>
       <div v-if="items.length > 0 && (hasNext || hasPrev)" class="mt-10 flex flex-col items-center gap-2">