fix(style): use small crops for small images

front/src/components/Queue.vue

@@ -246,8 +246,8 @@ if (!isWebGLSupported) {
                     @click="enter"
                   />
                   <Button
-                    v-else
                     secondary
+                    v-else
                     :aria-label="labels.exitFullscreen"
                     :title="labels.exitFullscreen"
                     icon="bi-fullscreen-exit"
@@ -305,11 +305,15 @@ if (!isWebGLSupported) {
                 @click.stop.prevent=""
               >
                 <Pill>
-                  <template
+                  <template #image>
-                    v-if="ac.artist.cover"
+                    <img
-                    #image
+                      v-if="ac.artist.cover"
-                  >
+                      v-lazy="ac.artist.cover?.urls.small_square_crop"
-                    <img v-lazy="ac.artist.cover?.urls.medium_square_crop">
+                    />
+                    <i
+                      v-else
+                      class="bi bi-person-circle"
+                    />
                   </template>
                   {{ ac.credit ?? t('components.Queue.meta.unknownArtist') }}
                 </Pill>
@@ -344,14 +348,8 @@ if (!isWebGLSupported) {
               <i class="loading spinner icon" />
             </p>
           </div>
-          <Spacer
+          <Spacer :size="16" class="desktop-and-below" />
-            :size="16"
+          <Layout flex class="additional-controls desktop-and-below">
-            class="desktop-and-below"
-          />
-          <Layout
-            flex
-            class="additional-controls desktop-and-below"
-          >
             <track-favorite-icon
               v-if="store.state.auth.authenticated"
               :track="currentTrack"
@@ -437,10 +435,7 @@ if (!isWebGLSupported) {
                     </template>
                   </i18n-t>
                   <span class="middle pipe symbol" />
-                  <span
+                  <span style="margin-right: 8px;" v-t="'components.Queue.meta.end'" />
-                    v-t="'components.Queue.meta.end'"
-                    style="margin-right: 8px;"
-                  />
                   <span :title="labels.duration">
                     {{ endsIn }}
                   </span>

front/src/components/Sidebar.vue

@@ -213,10 +213,10 @@ onMounted(() => {
           <div class="item">
             <div class="ui user-dropdown dropdown">
               <img
-                v-if="store.state.auth.authenticated && store.state.auth.profile?.avatar && store.state.auth.profile?.avatar.urls.medium_square_crop"
+                v-if="store.state.auth.authenticated && store.state.auth.profile?.avatar && store.state.auth.profile?.avatar.urls.small_square_crop"
                 class="ui avatar image"
                 alt=""
-                :src="store.getters['instance/absoluteUrl'](store.state.auth.profile?.avatar.urls.medium_square_crop)"
+                :src="store.getters['instance/absoluteUrl'](store.state.auth.profile?.avatar.urls.small_square_crop)"
               >
               <actor-avatar
                 v-else-if="store.state.auth.authenticated"
@@ -246,10 +246,10 @@ onMounted(() => {
             @click.prevent.exact="isUserModalOpen = !isUserModalOpen"
           >
             <img
-              v-if="store.state.auth.authenticated && store.state.auth.profile?.avatar?.urls.medium_square_crop"
+              v-if="store.state.auth.authenticated && store.state.auth.profile?.avatar?.urls.small_square_crop"
               class="ui avatar image"
               alt=""
-              :src="store.getters['instance/absoluteUrl'](store.state.auth.profile?.avatar.urls.medium_square_crop)"
+              :src="store.getters['instance/absoluteUrl'](store.state.auth.profile?.avatar.urls.small_square_crop)"
             >
             <actor-avatar
               v-else-if="store.state.auth.authenticated"

front/src/components/audio/ArtistLabel.vue

@@ -25,7 +25,7 @@ const route = computed(() => props.artist.channel
   >
     <img
       v-if="artist.cover && artist.cover.urls.original"
-      v-lazy="store.getters['instance/absoluteUrl'](artist.cover.urls.medium_square_crop)"
+      v-lazy="store.getters['instance/absoluteUrl'](artist.cover.urls.small_square_crop)"
       alt=""
       :class="[{circular: artist.content_category != 'podcast'}]"
     >

front/src/components/audio/podcast/MobileRow.vue

@@ -74,13 +74,13 @@ const actionsButtonLabel = computed(() => t('components.audio.podcast.MobileRow.
     >
       <img
         v-if="track.album?.cover?.urls.original"
-        v-lazy="store.getters['instance/absoluteUrl'](track.album.cover.urls.medium_square_crop)"
+        v-lazy="store.getters['instance/absoluteUrl'](track.album.cover.urls.small_square_crop)"
         alt=""
         class="ui artist-track mini image"
       >
       <img
         v-else-if="track.cover"
-        v-lazy="store.getters['instance/absoluteUrl'](track.cover.urls.medium_square_crop)"
+        v-lazy="store.getters['instance/absoluteUrl'](track.cover.urls.small_square_crop)"
         alt=""
         class="ui artist-track mini image"
       >

front/src/components/audio/podcast/Row.vue

@@ -86,13 +86,13 @@ await fetchData()
     >
       <img
         v-if="track.cover?.urls.original"
-        v-lazy="store.getters['instance/absoluteUrl'](track.cover.urls.medium_square_crop)"
+        v-lazy="store.getters['instance/absoluteUrl'](track.cover.urls.small_square_crop)"
         alt=""
         class="ui artist-track mini image"
       >
       <img
         v-if="track.album?.cover?.urls.original"
-        v-lazy="store.getters['instance/absoluteUrl'](track.album.cover.urls.medium_square_crop)"
+        v-lazy="store.getters['instance/absoluteUrl'](track.album.cover.urls.small_square_crop)"
         alt=""
         class="ui artist-track mini image"
       >
@@ -104,7 +104,7 @@ await fetchData()
       >
       <img
         v-else-if="defaultCover"
-        v-lazy="store.getters['instance/absoluteUrl'](defaultCover.urls.medium_square_crop)"
+        v-lazy="store.getters['instance/absoluteUrl'](defaultCover.urls.small_square_crop)"
         alt=""
         class="ui artist-track mini image"
       >

front/src/components/audio/track/MobileRow.vue

@@ -74,13 +74,13 @@ const actionsButtonLabel = computed(() => t('components.audio.track.MobileRow.bu
     >
       <img
         v-if="track.cover"
-        v-lazy="store.getters['instance/absoluteUrl'](track.cover.urls.medium_square_crop)"
+        v-lazy="store.getters['instance/absoluteUrl'](track.cover.urls.small_square_crop)"
         alt=""
         class="ui artist-track mini image"
       >
       <img
         v-else-if="track.album?.cover?.urls.original"
-        v-lazy="store.getters['instance/absoluteUrl'](track.album.cover.urls.medium_square_crop)"
+        v-lazy="store.getters['instance/absoluteUrl'](track.album.cover.urls.small_square_crop)"
         alt=""
         class="ui artist-track mini image"
       >

front/src/components/audio/track/Widget.vue

@@ -143,12 +143,12 @@ watch(() => props.websocketHandlers.includes('Listen'), (to) => {
       <div class="activity-image">
         <img
           v-if="object.track.album && object.track.album.cover"
-          v-lazy="store.getters['instance/absoluteUrl'](object.track.album.cover.urls.medium_square_crop)"
+          v-lazy="store.getters['instance/absoluteUrl'](object.track.album.cover.urls.small_square_crop)"
           alt=""
         >
         <img
           v-else-if="object.track.cover"
-          v-lazy="store.getters['instance/absoluteUrl'](object.track.cover.urls.medium_square_crop)"
+          v-lazy="store.getters['instance/absoluteUrl'](object.track.cover.urls.small_square_crop)"
           alt=""
         >
         <img

front/src/components/common/ActorAvatar.vue

@@ -18,7 +18,7 @@ const defaultAvatarStyle = computed(() => ({ backgroundColor: `#${actorColor.val
   <img
     v-if="actor.icon && actor.icon.urls.original"
     alt=""
-    :src="actor.icon.urls.medium_square_crop"
+    :src="actor.icon.urls.small_square_crop"
     class="ui tiny avatar circular image"
   >
   <span

front/src/components/common/UserLink.vue

@@ -36,8 +36,8 @@ const defaultAvatarStyle = computed(() => ({ backgroundColor: `#${userColor.valu
   >
     <template v-if="avatar">
       <img
-        v-if="user.avatar && user.avatar.urls.medium_square_crop"
+        v-if="user.avatar && user.avatar.urls.small_square_crop"
-        v-lazy="store.getters['instance/absoluteUrl'](user.avatar.urls.medium_square_crop)"
+        v-lazy="store.getters['instance/absoluteUrl'](user.avatar.urls.small_square_crop)"
         class="ui avatar tiny circular image"
         alt=""
       >

front/src/ui/components/UserMenu.vue

@@ -58,9 +58,9 @@ const labels = computed(() => ({
       @click="isOpen = !isOpen"
     >
       <img
-        v-if="store.state.auth.authenticated && store.state.auth.profile?.avatar?.urls.medium_square_crop"
+        v-if="store.state.auth.authenticated && store.state.auth.profile?.avatar?.urls.small_square_crop"
         alt=""
-        :src="store.getters['instance/absoluteUrl'](store.state.auth.profile?.avatar.urls.medium_square_crop)"
+        :src="store.getters['instance/absoluteUrl'](store.state.auth.profile?.avatar.urls.small_square_crop)"
         class="avatar"
       >
       <span