refactor(front): use `columns-per-item` prop for sections

front/src/components/album/Widget.vue

@@ -76,9 +76,9 @@ watch(
 
 <template>
   <Section
-    :h2="title"
     align-left
-    small-items
+    :h2="title"
+    :columns-per-item="3"
   >
     <inline-search-bar
       v-if="search"

front/src/components/audio/ChannelsWidget.vue

@@ -73,7 +73,7 @@ watch([() => props.filters, page],
 <template>
   <Section
     align-left
-    small-items
+    :columns-per-item="3"
     :h2="title || undefined"
   >
     <Loader

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

@@ -110,9 +110,9 @@ watch(() => props.websocketHandlers.includes('Listen'), (to) => {
 
 <template>
   <Section
-    :h2="title"
-    medium-items
     align-left
+    :h2="title"
+    :columns-per-item="4"
   >
     <Loader
       v-if="isLoading"

front/src/components/federation/LibraryWidget.vue

@@ -65,9 +65,9 @@ watch(() => props.url, () => {
 
 <template>
   <Section
-    :h2="title"
     align-left
-    small-items
+    :h2="title"
+    :columns-per-item="3"
   >
     <Loader
       v-if="isLoading"

front/src/components/manage/library/EditsCardList.vue

@@ -249,7 +249,7 @@ const getCurrentState = (target?: StateTarget): ReviewState => {
   <Loader v-if="isLoading" />
   <Section
     v-else-if="(result?.count ?? 0) > 0"
-    small-items
+    :columns-per-item="3"
   >
     <edit-card
       v-for="obj in result?.results ?? []"

front/src/components/playlists/Widget.vue

@@ -70,7 +70,7 @@ watch(
 <template>
   <Section
     align-left
-    small-items
+    :columns-per-item="3"
     :h2="title"
   >
     <Loader

front/src/views/auth/ProfileBase.vue

@@ -105,10 +105,13 @@ const recentActivity = ref(0)
       <!-- TODO: Translate Edit Link -->
       <Section
         :h1="props.username"
-        :action="{ text:'Edit profile', to:'/settings' }"
-        solid
-        primary
-        icon="bi-pencil-fill"
+        :action="{
+          text:'Edit profile',
+          to:'/settings',
+          primary: true,
+          solid: true,
+          icon: 'bi-pencil-fill'
+        }"
         style="margin-top: 58px;"
       >
         <span style="grid-column: 1 / -1">