From ec87a3b10817f9495cb84b6f7d29d3109180eed7 Mon Sep 17 00:00:00 2001
From: Janbong <jan@bongers.club>
Date: Thu, 19 Jan 2023 16:43:08 +0100
Subject: [PATCH] fix: Use v-item-group to display settings list again (#1855)

---
 frontend/src/components/System/AboutLinks.vue | 24 +++++----
 frontend/src/pages/settings/index.vue         | 53 +++++++++++--------
 2 files changed, 44 insertions(+), 33 deletions(-)

diff --git a/frontend/src/components/System/AboutLinks.vue b/frontend/src/components/System/AboutLinks.vue
index 8c554cebff2..36d66c931fc 100644
--- a/frontend/src/components/System/AboutLinks.vue
+++ b/frontend/src/components/System/AboutLinks.vue
@@ -1,25 +1,29 @@
 <template>
   <v-list>
-    <v-list-group>
+    <v-item-group>
       <v-list-item
         v-for="linkItem in linkItems"
         :key="linkItem.name"
         rel="noreferrer noopener"
         :href="linkItem.link"
         target="_blank">
-        <v-avatar>
-          <v-icon :icon="linkItem.icon" />
-        </v-avatar>
+        <template #prepend>
+          <v-avatar>
+            <v-icon :icon="linkItem.icon" />
+          </v-avatar>
+        </template>
         <v-list-item-title>
           {{ linkItem.name }}
         </v-list-item-title>
-        <v-list-item-action>
-          <v-icon>
-            <i-mdi-open-in-new />
-          </v-icon>
-        </v-list-item-action>
+        <template #append>
+          <v-list-item-action>
+            <v-icon>
+              <i-mdi-open-in-new />
+            </v-icon>
+          </v-list-item-action>
+        </template>
       </v-list-item>
-    </v-list-group>
+    </v-item-group>
   </v-list>
 </template>
 
diff --git a/frontend/src/pages/settings/index.vue b/frontend/src/pages/settings/index.vue
index a39bc15bc00..b46e19ed4fe 100644
--- a/frontend/src/pages/settings/index.vue
+++ b/frontend/src/pages/settings/index.vue
@@ -42,59 +42,66 @@
       </v-col>
       <v-col cols="12" md="6" lg="5" class="py-4">
         <!-- User settings -->
-        <v-list lines="two" class="mb-4">
-          <v-list-group>
+        <v-list lines="two" class="mb-4 overflow-y-hidden">
+          <v-item-group>
             <v-list-item
               v-for="userItem in userItems"
               :key="userItem.name"
               :to="userItem.link"
               :disabled="!userItem.link">
-              <v-avatar>
-                <v-icon :icon="userItem.icon" />
-              </v-avatar>
+              <template #prepend>
+                <v-avatar>
+                  <v-icon :icon="userItem.icon" />
+                </v-avatar>
+              </template>
               <v-list-item-title>
                 {{ userItem.name }}
               </v-list-item-title>
               <v-list-item-subtitle>
                 {{ userItem.description }}
               </v-list-item-subtitle>
-              <v-list-item-action>
-                <v-icon>
-                  <i-mdi-chevron-right />
-                </v-icon>
-              </v-list-item-action>
+              <template #append>
+                <v-list-item-action>
+                  <v-icon>
+                    <i-mdi-chevron-right />
+                  </v-icon>
+                </v-list-item-action>
+              </template>
             </v-list-item>
-          </v-list-group>
+          </v-item-group>
         </v-list>
         <!-- Administrator settings -->
         <div v-if="$remote.auth.currentUser.value?.Policy?.IsAdministrator">
           <v-list
             v-for="(adminSection, index) in adminSections"
             :key="`admin-section-${index}`"
-            lines="two"
-            class="mb-4">
-            <v-list-group>
+            class="mb-4 overflow-y-hidden">
+            <v-item-group>
               <v-list-item
                 v-for="adminItem in adminSection"
                 :key="adminItem.name"
                 :to="adminItem.link"
                 :disabled="!adminItem.link">
-                <v-avatar>
-                  <v-icon :icon="adminItem.icon" />
-                </v-avatar>
+                <template #prepend>
+                  <v-avatar>
+                    <v-icon :icon="adminItem.icon" />
+                  </v-avatar>
+                </template>
                 <v-list-item-title>
                   {{ adminItem.name }}
                 </v-list-item-title>
                 <v-list-item-subtitle>
                   {{ adminItem.description }}
                 </v-list-item-subtitle>
-                <v-list-item-action>
-                  <v-icon>
-                    <i-mdi-chevron-right />
-                  </v-icon>
-                </v-list-item-action>
+                <template #append>
+                  <v-list-item-action>
+                    <v-icon>
+                      <i-mdi-chevron-right />
+                    </v-icon>
+                  </v-list-item-action>
+                </template>
               </v-list-item>
-            </v-list-group>
+            </v-item-group>
           </v-list>
         </div>
         <about-links v-if="$vuetify.display.mobile" />