Stabilize medium control layout

public/styles.css

@@ -247,6 +247,7 @@ button[aria-pressed="false"] {
   overflow: hidden;
   width: 100%;
   min-width: 88px;
+  align-self: end;
   aspect-ratio: 16 / 10;
   border-radius: 8px;
   background: #1b2026;
@@ -276,6 +277,32 @@ button[aria-pressed="false"] {
   white-space: nowrap;
 }
 
+@media (min-width: 681px) and (max-width: 980px) {
+  .control-panel {
+    display: grid;
+    grid-template-rows: auto auto;
+    justify-content: stretch;
+  }
+
+  .device-controls {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    justify-content: stretch;
+  }
+
+  .device-row {
+    grid-template-columns: 48px minmax(0, 1fr);
+  }
+
+  .device-row select {
+    width: 100%;
+  }
+
+  .control-actions {
+    justify-content: end;
+  }
+}
+
 @media (max-width: 680px) {
   .topbar {
     align-items: stretch;