From 1e6358fd11e109b4ba54ed66e0538ad88fbd3b3d Mon Sep 17 00:00:00 2001
From: Phan An <me@phanan.net>
Date: Fri, 8 Jul 2022 00:57:25 +0200
Subject: [PATCH] fix: style for YouTube video list

---
 .../assets/js/components/ui/YouTubeVideoItem.vue    |  7 +++++--
 .../assets/js/components/ui/YouTubeVideoList.vue    | 13 ++++++++++---
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/resources/assets/js/components/ui/YouTubeVideoItem.vue b/resources/assets/js/components/ui/YouTubeVideoItem.vue
index 1c4d1d15..d5b4ad25 100644
--- a/resources/assets/js/components/ui/YouTubeVideoItem.vue
+++ b/resources/assets/js/components/ui/YouTubeVideoItem.vue
@@ -23,7 +23,7 @@ const play = () => youTubeService.play(video.value)
 <style lang="scss" scoped>
 a {
   display: flex;
-  padding: 12px 0;
+  gap: 10px;
 
   &:hover, &:active, &:focus {
     color: var(--color-text-primary);
@@ -40,7 +40,10 @@ a {
 }
 
 img {
-  margin-right: 10px;
   align-self: self-start;
 }
+
+.meta {
+  overflow-wrap: anywhere;
+}
 </style>
diff --git a/resources/assets/js/components/ui/YouTubeVideoList.vue b/resources/assets/js/components/ui/YouTubeVideoList.vue
index 86ad9c1a..c10db3cf 100644
--- a/resources/assets/js/components/ui/YouTubeVideoList.vue
+++ b/resources/assets/js/components/ui/YouTubeVideoList.vue
@@ -1,7 +1,11 @@
 <template>
   <div class="youtube-extra-wrapper">
     <template v-if="videos.length">
-      <YouTubeVideo v-for="video in videos" :key="video.id.videoId" :video="video"/>
+      <ul>
+        <li v-for="video in videos" :key="video.id.videoId">
+          <YouTubeVideo :video="video"/>
+        </li>
+      </ul>
       <Btn v-if="!loading" class="more" data-testid="youtube-search-more-btn" @click.prevent="loadMore">Load More</Btn>
     </template>
 
@@ -53,8 +57,11 @@ watchEffect(() => {
 .youtube-extra-wrapper {
   overflow-x: hidden;
 
-  a:last-of-type {
-    margin-bottom: 16px;
+  ul {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    margin-bottom: 24px;
   }
 }
 </style>