Constrain tables/grids to fix in viewwidth

frontend/src/App.tsx

@@ -329,7 +329,8 @@ function Home() {
         <button onClick={openDialog.bind(null, addMethodDialogId)}>
           Add method
         </button>
-        <table className='methods'>
+        <div className='methods'>
+          <table>
             <tbody>
               {methods?.map((method: any) => {
                 const coffeeFound = coffees.find((coffee: any) => coffee.id === method.coffee_id)
@@ -353,6 +354,7 @@ function Home() {
               })}
             </tbody>
           </table>
+        </div>
         <div className="row randomizerButtons">
           <button onClick={() => {
             setRandomMethodId(undefined)

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;
 }