Align media control fields

public/styles.css

@@ -420,24 +420,25 @@ button[aria-pressed="false"] {
 }
 
 .device-row {
-  position: relative;
   display: grid;
-  grid-template-columns: 40px minmax(150px, 240px);
-  grid-template-rows: 14px 40px;
-  align-items: center;
+  grid-template-columns: 36px minmax(150px, 240px);
+  grid-template-rows: 14px 36px;
+  align-items: end;
   column-gap: 8px;
-  row-gap: 3px;
+  row-gap: 5px;
   min-width: 0;
 }
 
 .symbol-button {
   display: inline-grid;
   place-items: center;
-  width: 40px;
-  height: 40px;
+  grid-column: 1;
+  grid-row: 2;
+  width: 36px;
+  height: 36px;
   min-width: 0;
   padding: 0;
-  font-size: 20px;
+  font-size: 18px;
   line-height: 1;
 }
 
@@ -452,21 +453,24 @@ button[aria-pressed="false"] {
 }
 
 .device-row label {
-  display: contents;
+  display: grid;
+  grid-column: 2;
+  grid-row: 1 / 3;
+  grid-template-rows: 14px 36px;
+  row-gap: 5px;
   min-width: 0;
 }
 
 .device-row label span {
-  position: absolute;
-  left: 0;
-  top: 0;
+  grid-row: 1;
+  justify-self: start;
+  margin-left: -44px;
   color: #aeb7c3;
   font-size: 12px;
   font-weight: 650;
 }
 
 .device-row label select {
-  grid-column: 2;
   grid-row: 2;
 }
 
@@ -479,7 +483,7 @@ button[aria-pressed="false"] {
 }
 
 .control-actions button {
-  height: 40px;
+  height: 36px;
   min-width: 104px;
   font-size: 13px;
 }