From 3d0e9206cdf7ab7b50b35790af1cbe46b108d033 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tanguy=20G=C3=A9r=C3=B4me?= <tanguy@gerome.fi>
Date: Tue, 6 Jan 2026 01:01:17 +0200
Subject: [PATCH] Constrain tables/grids to fix in viewwidth

---
 frontend/src/App.tsx   | 50 ++++++++++++++++++++++--------------------
 frontend/src/index.css | 26 +++++++++++++++-------
 2 files changed, 44 insertions(+), 32 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index e6d08e7..9cce067 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -329,30 +329,32 @@ function Home() {
         <button onClick={openDialog.bind(null, addMethodDialogId)}>
           Add method
         </button>
-        <table className='methods'>
-          <tbody>
-            {methods?.map((method: any) => {
-              const coffeeFound = coffees.find((coffee: any) => coffee.id === method.coffee_id)
-              const grinderFound = grinders.find((grinder: any) => grinder.id === method.grinder_id)
-              const brewerFound = brewers.find((brewer: any) => brewer.id === method.brewer_id)
-              const isRandomlySelected = (randomMethodId && method.id === randomMethodId)
-                || (randomMix && method.coffee_id === randomMix?.coffeeId && method.grinder_id === randomMix?.grinderId && method.brewer_id === randomMix?.brewerId)
-              return (
-                <tr key={`method-${method.id}`} className={`${isRandomlySelected ? 'randomlySelected' : ''}`}>
-                  <td>{coffeeFound.name}</td>
-                  <td>{method.coffee_amount_g} g</td>
-                  <td>{grinderFound.name}</td>
-                  <td>{method.grind_setting}</td>
-                  <td>{brewerFound.name}</td>
-                  <td>{method.water_amount_ml} ml</td>
-                  <td>{method.water_temperature_c} °C</td>
-                  <td>Bloom {method.blooming_time_sec} sec</td>
-                  <td>Brew {method.brewing_time_sec} sec</td>
-                </tr>
-              )
-            })}
-          </tbody>
-        </table>
+        <div className='methods'>
+          <table>
+            <tbody>
+              {methods?.map((method: any) => {
+                const coffeeFound = coffees.find((coffee: any) => coffee.id === method.coffee_id)
+                const grinderFound = grinders.find((grinder: any) => grinder.id === method.grinder_id)
+                const brewerFound = brewers.find((brewer: any) => brewer.id === method.brewer_id)
+                const isRandomlySelected = (randomMethodId && method.id === randomMethodId)
+                  || (randomMix && method.coffee_id === randomMix?.coffeeId && method.grinder_id === randomMix?.grinderId && method.brewer_id === randomMix?.brewerId)
+                return (
+                  <tr key={`method-${method.id}`} className={`${isRandomlySelected ? 'randomlySelected' : ''}`}>
+                    <td>{coffeeFound.name}</td>
+                    <td>{method.coffee_amount_g} g</td>
+                    <td>{grinderFound.name}</td>
+                    <td>{method.grind_setting}</td>
+                    <td>{brewerFound.name}</td>
+                    <td>{method.water_amount_ml} ml</td>
+                    <td>{method.water_temperature_c} °C</td>
+                    <td>Bloom {method.blooming_time_sec} sec</td>
+                    <td>Brew {method.brewing_time_sec} sec</td>
+                  </tr>
+                )
+              })}
+            </tbody>
+          </table>
+        </div>
         <div className="row randomizerButtons">
           <button onClick={() => {
             setRandomMethodId(undefined)
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 20ff6f1..b304780 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -78,6 +78,7 @@ button:focus-visible {
   padding: 0;
   min-height: 100vh;
   min-width: 100vw;
+  max-width: 100vw;
   width: 100%;
   height: 100%;
   display: flex;
@@ -98,6 +99,7 @@ nav h1 {
 }
 
 main {
+  max-width: 100vw;
   flex-grow: 1;
   align-self: stretch;
 
@@ -119,29 +121,31 @@ main {
 }
 
 .mixOptions {
+  max-width: 95vw;
+  padding: 4px;
+  overflow: auto;
   display: grid;
   grid-gap: 8px;
-  grid-template-columns: repeat(auto-fit, 300px);
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   grid-auto-flow: column;
 }
 
 .coffees, .grinders, .brewers {
-  /* display: grid; */
-  /* grid-template-columns: subgrid; */
   width: 100%;
   max-width: 300px;
+  justify-self: center;
 }
 
 .coffees {
-  grid-column: 1;
+  grid-column-start: 1;
 }
 
 .grinders {
-  grid-column: 2;
+  grid-column-start: 2;
 }
 
 .brewers {
-  grid-column: 3;
+  grid-column-start: 3;
 }
 
 button.coffees, button.grinders, button.brewers {
@@ -179,11 +183,17 @@ p.coffees, p.grinders, p.brewers {
 .addSomethingDialog {
 }
 
-table.methods {
+.methods {
+  max-width: 95vw;
+  padding: 4px;
+  overflow: auto;
+}
+
+.methods table {
   border-collapse: collapse;
 }
 
-table.methods td {
+.methods table td {
   outline: #777777 1px solid;
   padding: 2px 8px;
 }