From 28d20b39c7b940e99081943314a8c6eb3a391aab Mon Sep 17 00:00:00 2001
From: Kunthawat Greethong <kunthawat@gmailcom>
Date: Mon, 2 Mar 2026 13:41:24 +0700
Subject: [PATCH] fix: Make product tables responsive for mobile

- Add horizontal scroll wrapper for narrow screens
- Reduce font sizes on mobile (text-xs md:text-sm)
- Add padding adjustments for mobile (px-3 py-2)
- Add overflow-x-auto with negative margins for full-width scroll
- Enable word break on cell content
- Set min-width 600px for table readability
- Add border-collapse for cleaner borders

Tables now scroll horizontally on mobile with better readability.
---
 .../src/pages/products/[slug].astro           | 42 ++++++++++++++-----
 1 file changed, 32 insertions(+), 10 deletions(-)

diff --git a/dealplustech-astro/src/pages/products/[slug].astro b/dealplustech-astro/src/pages/products/[slug].astro
index 2701951b4..e5123047a 100644
--- a/dealplustech-astro/src/pages/products/[slug].astro
+++ b/dealplustech-astro/src/pages/products/[slug].astro
@@ -52,19 +52,41 @@ const productTables = productData?.productTables || [];
           </h2>
           <div class="space-y-10">
             {productTables.map((table, tableIndex) => (
-              <div class="bg-white rounded-2xl border-2 border-secondary-200 overflow-hidden shadow-lg">
-                <h3 class="text-xl md:text-2xl lg:text-3xl font-semibold text-secondary-800 p-5 md:p-6 bg-secondary-50 border-b-2 border-secondary-200">
+              <div class="bg-white rounded-2xl border-2 border-secondary-200 shadow-lg">
+                <h3 class="text-lg md:text-xl lg:text-2xl font-semibold text-secondary-800 p-4 md:p-6 bg-secondary-50 border-b-2 border-secondary-200">
                   {table.tableName}
                 </h3>
-                <div class="overflow-x-auto">
-                  <table class="w-full min-w-[700px]">
-                    <thead>
-                      <tr class="bg-primary-100">
-                        {table.headers.map((header, headerIndex) => (
-                          <th class="px-5 py-4 md:px-6 md:py-5 text-left text-base md:text-lg lg:text-xl font-bold text-primary-800 border-b-2 border-primary-300">
-                            {header}
-                          </th>
+                <div class="w-full overflow-x-auto -mx-2 md:mx-0">
+                  <div class="px-2 md:px-0">
+                    <table class="w-full min-w-[600px] border-collapse">
+                      <thead>
+                        <tr class="bg-primary-100">
+                          {table.headers.map((header, headerIndex) => (
+                            <th class="px-3 py-2 md:px-4 md:py-3 text-left text-xs md:text-sm lg:text-base font-bold text-primary-800 border-b-2 border-primary-300 whitespace-nowrap">
+                              {header}
+                            </th>
+                          ))}
+                        </tr>
+                      </thead>
+                      <tbody>
+                        {table.rows.map((row, rowIndex) => (
+                          <tr class={rowIndex % 2 === 0 ? 'bg-white' : 'bg-secondary-50'}>
+                            {row.map((cell, cellIndex) => (
+                              <td class="px-3 py-2 md:px-4 md:py-3 text-xs md:text-sm lg:text-base text-secondary-700 border-b border-secondary-100 break-words max-w-[200px] md:max-w-none">
+                                {cell}
+                              </td>
+                            ))}
+                          </tr>
                         ))}
+                      </tbody>
+                    </table>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </section>
+      )})}
                       </tr>
                     </thead>
                     <tbody>