partition table and css

rust/src_webpack/src/main.html

@@ -85,11 +85,47 @@
   }
   
   .plantcontainer {
-    min-width: 200px;
-    border-style: solid;
-    border-width: 1px;
-    padding: 8px;
+      flex-grow: 1;
+      min-width: 100%;
+      border-style: solid;
+      border-width: 1px;
+      padding: 8px;
+    }
+  @media (min-width: 350px) {
+    .plantcontainer {
+      flex-grow: 1;
+      min-width: 40%;
+      border-style: solid;
+      border-width: 1px;
+      padding: 8px;
+    }
   }
+  @media (min-width: 900px) {
+    .plantcontainer {
+      flex-grow: 1;
+      min-width: 20%;
+      border-style: solid;
+      border-width: 1px;
+      padding: 8px;
+    }
+  }
+  @media (min-width: 1800px) {
+    .plantcontainer {
+      flex-grow: 1;
+      min-width: 200px;
+      border-style: solid;
+      border-width: 1px;
+      padding: 8px;
+    }
+  }
+
+
+  
+  .plantlist {
+    display: flex; 
+    flex-wrap: wrap;
+  }
+
   .subtitle {
     flex-grow: 1; 
     text-align: center; 
@@ -140,18 +176,32 @@
     width: 100%;
   }
 
-  .lightpre{
+  .lightcheckbox{
+    margin: 0px;
     min-width: 20px
   }
-  .lightkeypre{
-    min-width: 100px;
-  }
   .lightkey{
-    min-width: 120px;
+    min-width: 200px;
   }
-  .lightpost{
+  .lightvalue{
     flex-grow: 1;
   }
+  .lightnumberbox{
+    min-width: 75px;
+  }
+
+  .tankcheckbox {
+    min-width: 20px;
+    margin: 0px;
+  }
+  .tankkey{
+    min-width: 250px;
+  }
+  .tankvalue{
+    flex-grow: 1;
+    margin: 0px;
+  }
+
 
 </style>
 
@@ -183,11 +233,7 @@
   <h2>config</h2>
   <h3>Plants:</h3>
   <button id="measure_moisture">Measure Moisture</button>
-  <div id="plants" style="display: flex; flex-wrap: 1;"></div>
-
-
-
-
+  <div id="plants" class="plantlist"></div>
 
   <button id="submit">Submit</button>
   <div id="submit_status"></div>