diff --git a/src/renderer/style.less b/src/renderer/style.less
index 18a62832..55673bc1 100644
--- a/src/renderer/style.less
+++ b/src/renderer/style.less
@@ -1829,6 +1829,11 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   }
 }
 
+.cd-mediaitem-square-container{
+  display: inline-flex;
+  flex-direction: column;
+}
+
 .reasonSP{
   // margin-left: 15px;
   color: rgb(167 163 163);
diff --git a/src/renderer/views/components/mediaitem-square.ejs b/src/renderer/views/components/mediaitem-square.ejs
index 294bc891..90d45943 100644
--- a/src/renderer/views/components/mediaitem-square.ejs
+++ b/src/renderer/views/components/mediaitem-square.ejs
@@ -1,5 +1,5 @@
 <script type="text/x-template" id="mediaitem-square">
-    <div tabindex="0"
+    <div tabindex="0" class="cd-mediaitem-square-container"
     @click.self="app.routeView(item)"
     @controller-click="app.routeView(item)"
     @contextmenu.self="contextMenu"
@@ -8,7 +8,7 @@
     <div v-if="reasonShown && isVisible" class="reasonSP ">{{item?.meta?.reason?.stringForDisplay ?? ' '}}</div>
     <div style="{'--spcolor': getBgColor()}"
          class="cd-mediaitem-square" :class="getClasses()" @contextmenu="contextMenu">
-        <template v-if="isVisible">           
+        <template>           
             <div class="artwork-container">
                 <div class="unavailable-overlay" v-if="unavailable">
                     <div class="codicon codicon-circle-slash"></div>