[web] Fix mobile layout when side controls were set.

web/src/components/Album/Album.css

@@ -23,4 +23,11 @@
   padding: 0;
   width: 24px;
   height: 24px;
+  border: 0;
+  border-radius: 4px;
+  cursor: pointer;
+  background: var(--button-background);
+}
+.Album-actions button:hover {
+  background: var(--controls-button-hover-background);
 }

web/src/components/App/App.css

@@ -54,7 +54,7 @@
 }
 
 @media screen and (max-width: 800px) {
-  .App {
+  .App[data-layout] {
     grid: "header" auto
           "panels" auto
           "main"   1fr

web/src/components/Controls/Controls.css

@@ -126,30 +126,38 @@
 }
 
 @media screen and (max-width: 800px) {
-  .Controls {
+  .App[data-layout] .Controls {
     grid: "progress progress progress" auto
           "cover    buttons time" auto
           "cover    title artist" auto
           "album    album album" auto
           / auto auto 1fr;
     grid-column-gap: 4px;
+    width: initial;
   }
-  .Controls-buttons {
+  .App[data-layout] .Controls-buttons {
     grid-column-gap: 10px;
   }
-  .Controls progress {
+  .App[data-layout] .Controls progress {
     height: 4px;
   }
-  .Controls-album {
+  .App[data-layout] .Controls-album {
     padding: 0 8px;
   }
-  .Controls-artist {
+  .App[data-layout] .Controls-artist {
     min-width: 25vw;
     padding: 0 8px;
     text-align: right;
   }
-  .Controls-time {
+  .App[data-layout] .Controls-time {
     justify-self: right;
     padding-right: 8px;
   }
+  .App[data-layout] .Controls img {
+    width: 64px;
+    height: 64px;
+  }
+  .App[data-layout] .Controls > div {
+    padding: 0;
+  }
 }

web/src/components/Queue/Queue.css

@@ -8,3 +8,15 @@
 .Queue-active {
   background: var(--accent);
 }
+.Queue button {
+  padding: 0;
+  width: 24px;
+  height: 24px;
+  border: 0;
+  border-radius: 4px;
+  cursor: pointer;
+  background: var(--button-background);
+}
+.Queue button:hover {
+  background: var(--controls-button-hover-background);
+}