From d9a54fb9ba19bcd2459b321d7907deec705b3ed0 Mon Sep 17 00:00:00 2001
From: Flupsi <upsiflu@gmail.com>
Date: Fri, 15 Aug 2025 18:48:32 +0200
Subject: [PATCH] fix(front): more layout consistency fixes

---
 front/src/components/library/Home.vue                 | 6 +-----
 front/src/components/library/Podcasts.vue             | 2 --
 front/src/components/library/Radios.vue               | 5 ++---
 front/src/components/manage/moderation/ReportCard.vue | 4 +---
 front/src/views/channels/List.vue                     | 5 -----
 5 files changed, 4 insertions(+), 18 deletions(-)

diff --git a/front/src/components/library/Home.vue b/front/src/components/library/Home.vue
index 11f3995f6..7fd6f4bd3 100644
--- a/front/src/components/library/Home.vue
+++ b/front/src/components/library/Home.vue
@@ -69,6 +69,7 @@ fetchData()
     v-title="labels.title"
     main
     stack
+    gap-84
   >
     <Header
       page-heading
@@ -79,33 +80,28 @@ fetchData()
       :limit="4"
       :title="t('components.library.Home.header.recentlyAdded')"
     />
-    <Spacer />
     <track-widget
       :title="t('components.library.Home.header.recentlyListened')"
       :url="'history/listenings/'"
       :filters="{ scope, ordering: '-creation_date', ...qualityFilters }"
       :websocket-handlers="['Listen']"
     />
-    <Spacer />
     <playlist-widget
       :url="'playlists/'"
       :filters="{scope: scope, playable: true, ordering: '-modification_date', limit: 4}"
       :title="t('components.library.Home.header.playlists')"
     />
-    <Spacer />
     <track-widget
       :title="t('components.library.Home.header.recentlyFavorited')"
       :url="'favorites/tracks/'"
       :filters="{scope: scope, ordering: '-creation_date'}"
     />
-    <Spacer />
     <channels-widget
       :limit="4"
       :filters="{ordering: '-creation_date', external: 'false'}"
       :title="t('components.library.Home.header.newChannels')"
       :show-modification-date="true"
     />
-    <Spacer />
     <artist-widget
       :limit="4"
       :filters="{playable: true, ordering: '-creation_date', include_channels: true, content_category: 'podcast'}"
diff --git a/front/src/components/library/Podcasts.vue b/front/src/components/library/Podcasts.vue
index 780240dbe..1b80ca563 100644
--- a/front/src/components/library/Podcasts.vue
+++ b/front/src/components/library/Podcasts.vue
@@ -146,8 +146,6 @@ const { to: upload } = useModal('upload')
     stack
     main
   >
-    <!-- TODO: Find out why lint:tsc doesn't like `onClick` while language server does -->
-    <!-- @vue-ignore -->
     <Header
       page-heading
       :h1="t('components.library.Podcasts.header.browse')"
diff --git a/front/src/components/library/Radios.vue b/front/src/components/library/Radios.vue
index 4a2e7901e..0714d59de 100644
--- a/front/src/components/library/Radios.vue
+++ b/front/src/components/library/Radios.vue
@@ -115,6 +115,7 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
 
 <template>
   <Layout
+    v-title="labels.title"
     main
     stack
     gap-84
@@ -158,9 +159,8 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
     <Section
       :h2="t('components.library.Radios.header.user')"
       align-left
-      :columns-per-item="3"
       :action="{
-        to: {name: 'library.radios.build'},
+        to: { name: 'library.radios.build' },
         text: t('components.library.Radios.button.create'),
         icon: 'bi-plus',
         solid: true,
@@ -168,7 +168,6 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
         disabled: !store.state.auth.authenticated || undefined
       }"
     >
-      <Spacer no-size />
       <Layout
         flex
         form
diff --git a/front/src/components/manage/moderation/ReportCard.vue b/front/src/components/manage/moderation/ReportCard.vue
index 736264ed9..2d913099c 100644
--- a/front/src/components/manage/moderation/ReportCard.vue
+++ b/front/src/components/manage/moderation/ReportCard.vue
@@ -259,9 +259,7 @@ const handleRemovedNote = (uuid: string) => {
         </tr>
       </tbody>
     </table>
-    <template
-      v-if="!isCollapsed"
-    >
+    <template v-if="!isCollapsed">
       <Layout flex>
         <div class="column">
           <h3>
diff --git a/front/src/views/channels/List.vue b/front/src/views/channels/List.vue
index 744b0f693..267f9f1f8 100644
--- a/front/src/views/channels/List.vue
+++ b/front/src/views/channels/List.vue
@@ -171,18 +171,13 @@ const showCreateModal = ref(false)
     gap-84
   >
     <Spacer no-size />
-    <!-- TODO: `yarn lint:tsc` doesn't understand the `Prop` type for `Header` while the language server does. It may be a question of typescript version... Investigate and fix! https://dev.funkwhale.audio/funkwhale/funkwhale/-/issues/2437 -->
-    <!-- @vue-ignore -->
     <Section
       v-if="store.state.auth.authenticated"
       :h1="t('views.channels.SubscriptionsList.title')"
       :action="{
         text: t('views.channels.SubscriptionsList.link.addNew'),
-        // @ts-ignore
         onClick: () => { showSubscribeModal = true },
-        // @ts-ignore
         primary: true,
-        // @ts-ignore
         icon: 'bi-plus'
       }"
       large-section-heading