From 9248543cfea1b92594c261fa8b613cc3cd8653aa Mon Sep 17 00:00:00 2001
From: Flatlogic Bot <support@flatlogic.com>
Date: Mon, 9 Mar 2026 05:25:57 +0000
Subject: [PATCH] fix pos layout

---
 pos.php | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/pos.php b/pos.php
index 93a0dcf..8ae9e51 100644
--- a/pos.php
+++ b/pos.php
@@ -194,7 +194,7 @@ $vat_rate = (float)($settings['vat_rate'] ?? 0);
       </div>
     </nav>
 
-    <div class="row g-0 pos-layout">
+    <div class="row g-0 pos-layout flex-nowrap">
       <!-- Left Sidebar: Categories -->
       <div class="col-md-2 col-auto pos-categories scrollable-y p-2" style="max-width: 220px;">
         <button class="category-btn active mb-2" data-category="all">
@@ -216,7 +216,7 @@ $vat_rate = (float)($settings['vat_rate'] ?? 0);
       <!-- Center Area: Product Grid -->
       <div class="col pos-products">
         <!-- Search Bar -->
-        <div class="px-3 py-2 border-bottom bg-white">
+        <div class="px-3 py-2 border-bottom bg-white" style="flex-shrink: 0;">
           <div class="row g-2 align-items-center">
             <div class="col-md-6 col-lg-5">
                 <div class="position-relative">
@@ -239,7 +239,7 @@ $vat_rate = (float)($settings['vat_rate'] ?? 0);
         </div>
 
         <!-- Grid Container -->
-        <div class="flex-grow-1 scrollable-y p-2">
+        <div class="flex-grow-1 p-2" style="overflow-y: auto; scrollbar-width: thin; min-height: 0;">
             <div class="row g-2 row-cols-3 row-cols-sm-4 row-cols-md-5 row-cols-lg-6 row-cols-xl-6 row-cols-xxl-6" id="product-grid">
             <?php foreach ($all_products as $product): ?>
                 <?php $has_variants = !empty($variants_by_product[$product['id']]); ?>
@@ -278,8 +278,8 @@ $vat_rate = (float)($settings['vat_rate'] ?? 0);
       </div>
 
       <!-- Right Sidebar: Cart -->
-      <div class="col-md-3 col-12 pos-cart shadow-sm">
-         <div class="p-2 border-bottom bg-white">
+      <div class="col-auto pos-cart shadow-sm" style="width: 320px; max-width: 45vw; min-width: 280px; flex-shrink: 0;">
+         <div class="p-2 border-bottom bg-white" style="flex-shrink: 0;">
             <div class="btn-group btn-group-touch w-100 mb-2" role="group">
                 <input type="radio" class="btn-check" name="order_type" id="ot-takeaway" value="takeaway" <?= $order_type === 'takeaway' ? 'checked' : '' ?>>
                 <label class="btn btn-outline-primary py-2 rounded-start-pill" for="ot-takeaway" style="font-weight: 700;">Takeaway</label>
@@ -320,14 +320,14 @@ $vat_rate = (float)($settings['vat_rate'] ?? 0);
             </div>
          </div>
 
-         <div class="flex-grow-1 overflow-auto p-2 bg-white" id="cart-items">
+         <div class="flex-grow-1 overflow-auto p-2 bg-white" id="cart-items" style="min-height: 0;">
              <div class="text-center text-muted mt-5 opacity-50">
                  <i class="bi bi-basket3 fs-1 d-block mb-2"></i>
                  <p class="small">No Items</p>
              </div>
          </div>
 
-         <div class="p-3 border-top bg-light mt-auto rounded-top-4">
+         <div class="p-3 border-top bg-light mt-auto rounded-top-4" style="flex-shrink: 0;">
              <div class="d-flex justify-content-between mb-1">
                  <span class="text-muted small">Subtotal</span>
                  <span class="fw-bold small" id="cart-subtotal"><?= format_currency(0) ?></span>