From 9e8995dc6e039032cc65f87895cf770f99e8b244 Mon Sep 17 00:00:00 2001
From: Yassine Doghri <yassine@doghri.fr>
Date: Mon, 12 Apr 2021 10:08:05 +0000
Subject: [PATCH] fix(persons): prevent overflow of persons list by adding
 horizontal scroll

add js tootip to show persons info
---
 app/Views/podcast/_partials/header.php      |  8 ++++++--
 app/Views/podcast/episode.php               | 18 ++++++++++--------
 app/Views/podcast/episode_authenticated.php |  8 ++++----
 3 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/app/Views/podcast/_partials/header.php b/app/Views/podcast/_partials/header.php
index 9e706df1..1002dea9 100644
--- a/app/Views/podcast/_partials/header.php
+++ b/app/Views/podcast/_partials/header.php
@@ -54,16 +54,18 @@
             <?php endforeach; ?>
         </div>
         <?php if (!empty($persons)): ?>
-        <div class="flex mb-6 space-x-2">
+        <div class="flex w-full mb-6 space-x-2 overflow-y-auto">
             <?php foreach ($persons as $person): ?>
                 <?php if ($person['information_url']): ?>
                     <a href="<?= $person[
                         'information_url'
-                    ] ?>" target="_blank" rel="noreferrer noopener">
+                    ] ?>" target="_blank" rel="noreferrer noopener" class="flex-shrink-0">
                         <img
                         src="<?= $person['thumbnail_url'] ?>"
                         alt="<?= $person['full_name'] ?>"
                         class="object-cover w-12 h-12 rounded-full"
+                        data-toggle="tooltip"
+                        data-placement="bottom"
                         title="[<?= $person['full_name'] ?>] <?= $person[
     'roles'
 ] ?>" />
@@ -73,6 +75,8 @@
                     src="<?= $person['thumbnail_url'] ?>"
                     alt="<?= $person['full_name'] ?>"
                     class="object-cover w-12 h-12 rounded-full"
+                    data-toggle="tooltip"
+                    data-placement="bottom"
                     title="[<?= $person['full_name'] ?>] <?= $person[
     'roles'
 ] ?>" />
diff --git a/app/Views/podcast/episode.php b/app/Views/podcast/episode.php
index 33dbffa4..464e2441 100644
--- a/app/Views/podcast/episode.php
+++ b/app/Views/podcast/episode.php
@@ -120,27 +120,29 @@
                     ) ?>
                 <?php endif; ?>
                 <?php if ($episodePersons): ?>
-                    <div class="flex space-x-2">
+                    <div class="flex w-full space-x-2 overflow-y-auto">
                         <?php foreach ($episodePersons as $person): ?>
                             <?php if ($person['information_url']): ?>
                                 <a href="<?= $person[
                                     'information_url'
-                                ] ?>" target="_blank" rel="noreferrer noopener">
+                                ] ?>" target="_blank" rel="noreferrer noopener" class="flex-shrink-0">
                                     <img src="<?= $person[
                                         'thumbnail_url'
                                     ] ?>" alt="<?= $person[
     'full_name'
-] ?>" class="object-cover w-12 h-12 rounded-full" title="[<?= $person[
-    'full_name'
-] ?>] <?= $person['roles'] ?>" /></a>
+] ?>" class="object-cover w-12 h-12 rounded-full" data-toggle="tooltip"
+data-placement="bottom" title="[<?= $person['full_name'] ?>] <?= $person[
+    'roles'
+] ?>" /></a>
                             <?php else: ?>
                                 <img src="<?= $person[
                                     'thumbnail_url'
                                 ] ?>" alt="<?= $person[
     'full_name'
-] ?>" class="object-cover w-12 h-12 rounded-full" title="[<?= $person[
-    'full_name'
-] ?>] <?= $person['roles'] ?>" />
+] ?>" class="object-cover w-12 h-12 rounded-full" data-toggle="tooltip"
+data-placement="bottom" title="[<?= $person['full_name'] ?>] <?= $person[
+    'roles'
+] ?>" />
                             <?php endif; ?>
                         <?php endforeach; ?>
                     </div>
diff --git a/app/Views/podcast/episode_authenticated.php b/app/Views/podcast/episode_authenticated.php
index 8d253e1e..b8c4b903 100644
--- a/app/Views/podcast/episode_authenticated.php
+++ b/app/Views/podcast/episode_authenticated.php
@@ -120,17 +120,17 @@
                     ) ?>
                 <?php endif; ?>
                 <?php if ($episodePersons): ?>
-                    <div class="flex space-x-2">
+                    <div class="flex w-full space-x-2 overflow-y-auto">
                         <?php foreach ($episodePersons as $person): ?>
                             <?php if ($person['information_url']): ?>
                                 <a href="<?= $person[
                                     'information_url'
-                                ] ?>" target="_blank" rel="noreferrer noopener">
+                                ] ?>" target="_blank" rel="noreferrer noopener" class="flex-shrink-0">
                                     <img src="<?= $person[
                                         'thumbnail_url'
                                     ] ?>" alt="<?= $person[
     'full_name'
-] ?>" class="object-cover w-12 h-12 rounded-full" title="[<?= $person[
+] ?>" class="object-cover w-12 h-12 rounded-full" data-toggle="tooltip" data-placement="bottom" title="[<?= $person[
     'full_name'
 ] ?>] <?= $person['roles'] ?>" /></a>
                             <?php else: ?>
@@ -138,7 +138,7 @@
                                     'thumbnail_url'
                                 ] ?>" alt="<?= $person[
     'full_name'
-] ?>" class="object-cover w-12 h-12 rounded-full" title="[<?= $person[
+] ?>" class="object-cover w-12 h-12 rounded-full" data-toggle="tooltip" data-placement="bottom" title="[<?= $person[
     'full_name'
 ] ?>] <?= $person['roles'] ?>" />
                             <?php endif; ?>