diff --git a/public/styles.css b/public/styles.css index 3c2f9ff..1bab23e 100644 --- a/public/styles.css +++ b/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;