--- a/src/main.ts	Sun Jan 28 21:18:40 2024 -0800
+++ b/src/main.ts	Mon Jan 29 11:50:06 2024 -0800
@@ -45,6 +45,12 @@
       .col-group-3 {
         background: #fee8c8;
       }
+
+      @media (max-width: 1200px) {
+        .opt {
+          display: none;
+        }
+      }
     `,
   ];
 
@@ -92,10 +98,10 @@
       <th class="col-group-1">light</th>
       <th class="col-group-1">address</th>
       <th class="col-group-2">requested color</th>
-      <th class="col-group-2">requested device color</th>
+      <th class="col-group-2 opt">requested device color</th>
       <th class="col-group-3">emitting color</th>
-      <th class="col-group-3">online</th>
-      <th class="col-group-3">latency</th>
+      <th class="col-group-3 opt">online</th>
+      <th class="col-group-3 opt">latency</th>
     </tr>`;
   }
 
@@ -107,11 +113,12 @@
         <td class="col-group-2">
           <code>${d.requestingColor}</code>
           <input type="color" @input=${this.onRequestingColor.bind(this, d.name)} .value="${d.requestingColor}" />
+          <button @click=${this.onZero.bind(this, d.name)}>off</button>
         </td>
-        <td class="col-group-2"><code>${JSON.stringify(d.requestingDeviceColor)}</code></td>
+        <td class="col-group-2 opt"><code>${JSON.stringify(d.requestingDeviceColor)}</code></td>
         <td class="col-group-3">${d.emittingColor} <span class="color" style="background: ${d.emittingColor}"></span></td>
-        <td class="col-group-3">${d.online ? "✔" : ""}</td>
-        <td class="col-group-3">${d.latencyMs} ms</td>
+        <td class="col-group-3 opt">${d.online ? "✔" : ""}</td>
+        <td class="col-group-3 opt">${d.latencyMs} ms</td>
       </tr>
     `;
   }