fix(front): playable playlists with description

front/src/components/common/RenderedDescription.vue

@@ -35,7 +35,7 @@ const props = withDefaults(defineProps<Props>(), {
   canUpdate: true,
   fetchHtml: false,
   permissive: false,
-  truncateLength: 150
+  truncateLength: 200
 })
 
 const preview = ref('')
@@ -100,7 +100,7 @@ const submit = async () => {
       <a
         v-if="showMore === false"
         class="more"
-        style="float: right; margin-top: -32px; color: var(--fw-primary);"
+        style="align-self:end; color: var(--fw-primary);"
         href=""
         @click.stop.prevent="showMore = true"
       >
@@ -109,7 +109,7 @@ const submit = async () => {
       <a
         v-else
         class="more"
-        style="float: right; margin-top: -32px; color: var(--fw-primary);"
+        style="align-self:end; color: var(--fw-primary);"
         href=""
         @click.stop.prevent="showMore = false"
       >

front/src/components/playlists/Form.vue

@@ -152,6 +152,16 @@ const submit = async () => {
         :label="t('components.playlists.Form.label.visibility')"
       />
     </div>
+    <!-- TODO: Add description to model and types -->
+    <div class="field">
+      <Textarea
+        v-model="playlist?.description"
+        :label="t('components.playlists.Form.label.description')"
+        :placeholder="t('components.playlists.Form.placeholder.description')"
+        :rows="3"
+        :max-length="500"
+        />
+    </div>
     <div class="field">
       <span id="updatePlaylistLabel" />
       <Button

front/src/views/playlists/Detail.vue

@@ -147,9 +147,10 @@ const deletePlaylist = async () => {
         >
       </div>
       <Layout
-        stack
-        style="flex: 1; gap: 8px;"
+      stack
+      style="flex: 1; gap: 8px;"
       >
+        <Spacer />
         <h1>{{ playlist.name }}</h1>
         <div class="meta">
           {{ playlist.tracks_count }}
@@ -157,7 +158,7 @@ const deletePlaylist = async () => {
           <i class="bi bi-dot" />
           <Duration :seconds="playlist.duration" />
         </div>
-        <div class="meta">
+        <Layout flex gap-8>
           <!-- TODO: Translations -->
           by
           <ActorLink
@@ -170,7 +171,12 @@ const deletePlaylist = async () => {
           <HumanDate
             :date="playlist.modification_date"
           />
-        </div>
+        </Layout>
+        <RenderedDescription
+          :description="playlist.description"
+          :max-length="200"
+          :show-more="true"
+        />
         <Layout
           flex
           class="header-buttons"