Reworking the layouts to allow for the new design

src/views/contents/ContentList.vue

@@ -1,29 +1,38 @@
 <template>
+  
+  <div>
+    
+    <v-infinite-scroll :items="contents"
+                       :onLoad="fetchContents">
 
-  <v-infinite-scroll :items="contents"
-                     :onLoad="fetchContents"
-                     class="md:gap-2">
+      <!-- TODO: the -mt-4 is necessary because the v-infinite-scroll has some 'top' panel offsetting the list -->
+      <div class="flex flex-column gap-2 -mt-4">
+        <template v-for="content in contents" :key="content.id">
+          <component
+              :is="isSmallScreen ? ContentCardSm : ContentCardNormal"
+              :content="content"
+              @content-deleted="onContentDeleted"
+          ></component>
+        </template>
+      </div>
+     
+      <template v-slot:empty>
+        Il n'y a pas plus de contenus
+      </template>
 
-    <template v-for="content in contents" :key="content.id">
-      <component
-          :is="isSmallScreen ? ContentCardSm : ContentCardNormal"
-          :content="content"
-          @content-deleted="onContentDeleted"
-      ></component>
-    </template>
-
-    <template v-slot:empty>
-      Il n'y a pas plus de contenus
-    </template>
-
-    <template v-slot:error>
-      <v-alert type="error">{{ errorMessage }}</v-alert>
-    </template>
-
-  </v-infinite-scroll>
+      <template v-slot:error>
+        <v-alert type="error">{{ errorMessage }}</v-alert>
+      </template>
 
+    </v-infinite-scroll>
+    
+  </div>
+  
 </template>
 
+<style>
+
+</style>
 
 <script setup>
 import {useClient} from '@/plugins/api.js';