From 6c23b2464185f61817973b0ca2b4638e668fa511 Mon Sep 17 00:00:00 2001
From: Arc <ben@arc.wales>
Date: Thu, 19 Feb 2026 20:59:16 +0000
Subject: [PATCH] fix: maximise card view on mobile

---
 templates/tpos/_cart.html | 55 +++++++++++++++++++++++++++------------
 1 file changed, 38 insertions(+), 17 deletions(-)

diff --git a/templates/tpos/_cart.html b/templates/tpos/_cart.html
index 6b6fa2b..153850d 100644
--- a/templates/tpos/_cart.html
+++ b/templates/tpos/_cart.html
@@ -192,25 +192,46 @@ <h5 v-show="!denomIsSats" class="q-mt-none q-mb-sm">
 
   <div class="q-mx-auto q-pa-md" :class="{'dimmed': moreBtn}">
     <!-- Items List Large -->
-    <div v-if="isGridView" class="flex justify-center q-col-gutter-sm q-mt-md">
-      <div
-        style="height: 150px; width: 150px"
-        v-for="item in filteredItems"
-        :key="item.id"
-      >
-        <q-card class="full-height" flat bordered v-ripple>
-          <div @click="addToCart(item)">
-            <q-img :src="item.image || null" :ratio="4/3" fit="contain">
-            </q-img>
+    <div v-if="isGridView">
+      <!-- xs: 4 per row, fill width -->
+      <div class="row q-col-gutter-sm q-mt-md lt-sm">
+        <div class="col-3" v-for="item in filteredItems" :key="item.id">
+          <q-card class="full-height" flat bordered v-ripple>
+            <div @click="addToCart(item)">
+              <q-img :src="item.image || null" :ratio="4/3" fit="contain">
+              </q-img>
 
-            <span class="item-grid-title" dense v-text="item.title"></span>
+              <span class="item-grid-title" dense v-text="item.title"></span>
 
-            <q-separator
-              class="q-pt-xs"
-              :color="setColor(item.categories[0])"
-            ></q-separator>
-          </div>
-        </q-card>
+              <q-separator
+                class="q-pt-xs"
+                :color="setColor(item.categories[0])"
+              ></q-separator>
+            </div>
+          </q-card>
+        </div>
+      </div>
+      <!-- sm+ : keep original fixed card size -->
+      <div class="flex justify-center q-col-gutter-sm q-mt-md gt-xs">
+        <div
+          style="height: 150px; width: 150px"
+          v-for="item in filteredItems"
+          :key="item.id"
+        >
+          <q-card class="full-height" flat bordered v-ripple>
+            <div @click="addToCart(item)">
+              <q-img :src="item.image || null" :ratio="4/3" fit="contain">
+              </q-img>
+
+              <span class="item-grid-title" dense v-text="item.title"></span>
+
+              <q-separator
+                class="q-pt-xs"
+                :color="setColor(item.categories[0])"
+              ></q-separator>
+            </div>
+          </q-card>
+        </div>
       </div>
     </div>
     <!-- Items List Small -->