From 1e11de1ceb1d155341f854a42b2b06ac4b88b051 Mon Sep 17 00:00:00 2001
From: Daniel Neto <me@danielneto.com>
Date: Tue, 1 Oct 2024 14:45:30 -0300
Subject: [PATCH] Adjust gallery

---
 plugin/Gallery/style.css                       | 18 ++++++++++++++++++
 .../view/extraitems_templates/extraItem.html   |  8 ++++----
 2 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/plugin/Gallery/style.css b/plugin/Gallery/style.css
index ead3e1de8a..d87ba822c4 100644
--- a/plugin/Gallery/style.css
+++ b/plugin/Gallery/style.css
@@ -85,6 +85,23 @@ h3.galleryTitle{
     margin: 2px 0;
 }
 
+.galeryDetails .photo_identification{
+    display: inline-flex;
+    width: 100%;
+}
+
+.galeryDetails .photo_identification img{
+    max-width: 20px;
+    margin-right: 5px;
+}
+
+.galeryDetails .photo_identification .liveUser{
+    overflow: hidden;
+    white-space: nowrap; /* Prevents the text from wrapping to the next line */
+    text-overflow: ellipsis; /* Adds the ellipsis when the text overflows */
+    max-width: 100%; /* Set a width to trigger the ellipsis when content exceeds it */
+}
+
 .firstRow .galeryDetails div{
     font-size: 1em;
 }
@@ -298,6 +315,7 @@ a.h6.galleryLink > strong{
 }
 .channelPhotoDescription{
     width: calc(100% - 65px);
+    overflow: hidden;
 }
 
 .notShowChannel .channelPhotoDescription{
diff --git a/plugin/Live/view/extraitems_templates/extraItem.html b/plugin/Live/view/extraitems_templates/extraItem.html
index 69b2268f96..956965e5df 100644
--- a/plugin/Live/view/extraitems_templates/extraItem.html
+++ b/plugin/Live/view/extraitems_templates/extraItem.html
@@ -11,10 +11,10 @@
     </a>
 
     <div class="galeryDetails" style="overflow: hidden;">
-        <div>
-            <img src="_user_photo_" class="photoImg img img-circle img-responsive" style="max-width: 20px;">
-        </div>
-        <div class="liveUser">_user_identification_</div>     
+        <div class="photo_identification" data-toggle="tooltip" title="_user_identification_" >
+            <img src="_user_photo_" class="photoImg img img-circle img-responsive">
+            <div class="liveUser">_user_identification_</div>  
+        </div>   
         <div class="galleryTags" style="clear: both; min-height: 20px;">
             _total_on_live_links_id_
         </div>