From a6334a923fa4fa0ad10aa2fe20d2d3b7ca8dd433 Mon Sep 17 00:00:00 2001
From: wvffle <funkwhale@wvffle.net>
Date: Sat, 26 Nov 2022 11:05:49 +0000
Subject: [PATCH] Fix scrolling queue on open

---
 front/src/components/Queue.vue                | 4 ++--
 front/src/components/vui/list/VirtualList.vue | 7 ++++++-
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/front/src/components/Queue.vue b/front/src/components/Queue.vue
index 17745a7f8..763058190 100644
--- a/front/src/components/Queue.vue
+++ b/front/src/components/Queue.vue
@@ -449,12 +449,12 @@ const coverType = useStorage('queue:cover-type', CoverType.COVER_ART)
           @visible="scrollToCurrent('auto')"
           @hidden="scrollLoop"
         >
-          <template #default="{ index, item, classList }">
+          <template #default="{ index, item, classlist }">
             <queue-item
               :data-index="index"
               :index="index"
               :source="item"
-              :class="[...classList, currentIndex === index && 'active']"
+              :class="[...classlist, currentIndex === index && 'active']"
               @play="play"
               @remove="dequeue"
             />
diff --git a/front/src/components/vui/list/VirtualList.vue b/front/src/components/vui/list/VirtualList.vue
index 5e9f4a2c2..8578abf0d 100644
--- a/front/src/components/vui/list/VirtualList.vue
+++ b/front/src/components/vui/list/VirtualList.vue
@@ -167,6 +167,7 @@ defineExpose({
       key-field="key"
       :items="list"
       :item-size="size"
+      :grid-items="1"
       @mousedown="onMousedown"
       @touchstart="onMousedown"
       @touchmove="onTouchmove"
@@ -180,7 +181,7 @@ defineExpose({
 
       <template #default="{ item, index }">
         <slot
-          :class-list="[draggedItem && hoveredIndex === index && `drop-${position}`, 'drag-item']"
+          :classlist="[draggedItem && hoveredIndex === index && `drop-${position}`, 'drag-item']"
           :item="item"
           :index="index"
         />
@@ -245,4 +246,8 @@ defineExpose({
 .theme-light .ghost-container {
   background: rgba(0, 0, 0, 0.1);
 }
+
+.vue-recycle-scroller__item-view {
+  width: 100% !important;
+}
 </style>