From 8ff3526f45216a0eb6226cb610f039282902dd9e Mon Sep 17 00:00:00 2001
From: Bnyro <bnyro@tutanota.com>
Date: Sat, 20 Apr 2024 18:44:00 +0200
Subject: [PATCH] fix: mobile layout of playlist page

---
 src/components/PlaylistPage.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/PlaylistPage.vue b/src/components/PlaylistPage.vue
index 4d81af35..d3a0af98 100644
--- a/src/components/PlaylistPage.vue
+++ b/src/components/PlaylistPage.vue
@@ -6,15 +6,15 @@
 
         <CollapsableText v-if="playlist?.description" :text="playlist.description" />
 
-        <div class="mt-1 flex items-center justify-between">
+        <div class="mt-1 flex <md:flex-col md:items-center justify-between">
             <div>
                 <router-link class="link flex items-center gap-3" :to="playlist.uploaderUrl || '/'">
-                    <img loading="lazy" :src="playlist.uploaderAvatar" class="rounded-full" />
+                    <img loading="lazy" :src="playlist.uploaderAvatar" class="rounded-full h-12" />
                     <strong v-text="playlist.uploader" />
                 </router-link>
             </div>
-            <div>
-                <strong class="mr-2" v-text="`${playlist.videos} ${$t('video.videos')}`" />
+            <div class="flex flex-wrap items-center gap-1">
+                <strong v-text="`${playlist.videos} ${$t('video.videos')}`" />
                 <button v-if="!isPipedPlaylist" class="btn mx-1" @click="bookmarkPlaylist">
                     {{ $t(`actions.${isBookmarked ? "playlist_bookmarked" : "bookmark_playlist"}`)
                     }}<i class="i-fa6-solid:bookmark ml-3" />