From dcd8e94101d58503775a5494256169d3cf403675 Mon Sep 17 00:00:00 2001
From: Agate <me@agate.blue>
Date: Mon, 31 Aug 2020 17:16:48 +0200
Subject: [PATCH] Fixed controls overflowing because of too large image in
 queue mode

---
 front/src/components/Queue.vue         | 6 ++----
 front/src/style/components/_queue.scss | 6 +++++-
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/front/src/components/Queue.vue b/front/src/components/Queue.vue
index 27365be14..bc6979164 100644
--- a/front/src/components/Queue.vue
+++ b/front/src/components/Queue.vue
@@ -34,19 +34,17 @@
                     <translate translate-context="Sidebar/Player/Error message.Paragraph">You may have a connectivity issue.</translate>
                   </p>
                 </div>
-                <div class="additional-controls">
+                <div class="additional-controls tablet-and-below">
                   <track-favorite-icon
-                    class="tablet-and-below"
                     v-if="$store.state.auth.authenticated"
                     :track="currentTrack"></track-favorite-icon>
                   <track-playlist-icon
-                    class="tablet-and-below"
                     v-if="$store.state.auth.authenticated"
                     :track="currentTrack"></track-playlist-icon>
                   <button
                     v-if="$store.state.auth.authenticated"
                     @click="$store.dispatch('moderation/hide', {type: 'artist', target: currentTrack.artist})"
-                    :class="['ui', 'really', 'basic', 'circular', 'icon', 'button', 'tablet-and-below']"
+                    :class="['ui', 'really', 'basic', 'circular', 'icon', 'button']"
                     :aria-label="labels.addArtistContentFilter"
                     :title="labels.addArtistContentFilter">
                     <i :class="['eye slash outline', 'basic', 'icon']"></i>
diff --git a/front/src/style/components/_queue.scss b/front/src/style/components/_queue.scss
index c4ad81df6..b2bcde76b 100644
--- a/front/src/style/components/_queue.scss
+++ b/front/src/style/components/_queue.scss
@@ -137,6 +137,10 @@
     bottom: 0;
     top: 0;
     width: 32%;
+    > img {
+      height: 50vh;
+      width: 50vh;
+    }
     @include media("<desktop") {
       padding: 0.5em;
       font-size: 1.5em;
@@ -148,7 +152,7 @@
         max-height: 50vh;
       }
     }
-    > *:not(.image) {
+    > *:not(.image):not(img) {
       width: 100%;
     }
     h1 {