From dc4314a7624304002e1e953602e2633714ca9220 Mon Sep 17 00:00:00 2001
From: Mel Heisey <mheisey.nox@gmail.com>
Date: Tue, 13 Apr 2021 20:15:16 -0700
Subject: [PATCH 1/2] add tooltips to show who reacted to your post/comment on
 main feed

---
 static/js/ctzn-tags/post-view.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/static/js/ctzn-tags/post-view.js b/static/js/ctzn-tags/post-view.js
index 0378989e..a464fb81 100644
--- a/static/js/ctzn-tags/post-view.js
+++ b/static/js/ctzn-tags/post-view.js
@@ -292,7 +292,7 @@ export class PostView extends LitElement {
             ${this.renderPostTextNonFull()}
             ${this.renderMedia()}
             ${this.hasReactionsOrGifts ? html`
-              <div class="flex items-center my-1.5 mx-0.5 text-gray-500 text-sm truncate">
+              <div class="flex items-center my-1.5 mx-0.5 text-gray-500 text-sm overflow-ellipsis whitspace-nowrap">
                 ${this.renderGiftedItems()}
                 ${this.renderReactions()}
               </div>
@@ -491,9 +491,11 @@ export class PostView extends LitElement {
         const colors = this.haveIReacted(reaction) ? 'bg-blue-50 hov:hover:bg-blue-100 text-blue-600' : 'bg-gray-100 text-gray-500 hov:hover:bg-gray-200'
         return html`
           <a
-            class="inline-block mr-2 px-1.5 py-0.5 rounded text-sm flex-shrink-0 ${colors}"
+            class="inline-block mr-2 px-1.5 py-0.5 rounded text-sm flex-shrink-0 ${colors} tooltip-top"
             @click=${e => this.onClickReaction(e, reaction)}
-          >${unsafeHTML(emojify(makeSafe(reaction)))} <sup class="font-medium">${userIds.length}</sup></a>
+            data-tooltip="${userIds.join(", ")}"
+          >${unsafeHTML(emojify(makeSafe(reaction)))} <sup class="font-medium">${userIds.length}</sup></span>
+          </a>
         `
       })}
     `

From d442dab295ad4249a4987c22a8c31c9d2e1caf1b Mon Sep 17 00:00:00 2001
From: Mel Heisey <mheisey.nox@gmail.com>
Date: Tue, 13 Apr 2021 23:08:12 -0700
Subject: [PATCH 2/2] limit reaction tooltip to 4 users, add tooltip to gifts

---
 static/js/ctzn-tags/post-view.js  | 14 +++++++++-----
 static/js/ctzn-tags/posts-feed.js |  2 +-
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/static/js/ctzn-tags/post-view.js b/static/js/ctzn-tags/post-view.js
index a464fb81..034f9bfc 100644
--- a/static/js/ctzn-tags/post-view.js
+++ b/static/js/ctzn-tags/post-view.js
@@ -468,17 +468,20 @@ export class PostView extends LitElement {
       return ''
     }
     return html`
-      ${repeat(this.post.relatedItemTransfers, item => html`
+      ${repeat(this.post.relatedItemTransfers, item => {
+        let tooltipUser = item.dbmethodCall?.authorId
+        return html`
         <span
-          class="flex-shrink-0 inline-flex items-center border border-gray-300 px-1 py-0.5 rounded mr-1.5 text-sm font-semibold"
-        >
+          class="flex-shrink-0 inline-flex items-center border border-gray-300 px-1 py-0.5 rounded mr-1.5 text-sm font-semibold tooltip-top"
+          data-tooltip="${tooltipUser}">
           <img
             class="block w-4 h-4 object-cover mr-1"
             src=${ITEM_CLASS_ICON_URL(this.communityUserId, item.itemClassId)}
           >
           ${item.qty}
         </span>
-      `)}
+      `}
+      )}
     `
   }
 
@@ -488,12 +491,13 @@ export class PostView extends LitElement {
     }
     return html`
       ${repeat(Object.entries(this.post.reactions), ([reaction, userIds]) => {
+        let tooltipUsersText = (userIds?.slice(0,4) || []).join(", ")
         const colors = this.haveIReacted(reaction) ? 'bg-blue-50 hov:hover:bg-blue-100 text-blue-600' : 'bg-gray-100 text-gray-500 hov:hover:bg-gray-200'
         return html`
           <a
             class="inline-block mr-2 px-1.5 py-0.5 rounded text-sm flex-shrink-0 ${colors} tooltip-top"
             @click=${e => this.onClickReaction(e, reaction)}
-            data-tooltip="${userIds.join(", ")}"
+            data-tooltip="${tooltipUsersText}${userIds?.length > 4 ? '...' : ''}"
           >${unsafeHTML(emojify(makeSafe(reaction)))} <sup class="font-medium">${userIds.length}</sup></span>
           </a>
         `
diff --git a/static/js/ctzn-tags/posts-feed.js b/static/js/ctzn-tags/posts-feed.js
index bf3ce3a1..7adbe53e 100644
--- a/static/js/ctzn-tags/posts-feed.js
+++ b/static/js/ctzn-tags/posts-feed.js
@@ -282,7 +282,7 @@ export class PostsFeed extends LitElement {
   
   renderResult (post) {
     return html`
-      <div style="content-visibility: auto; contain-intrinsic-size: 640px 120px;">
+      <div style="contain-intrinsic-size: 640px 120px;">
         <ctzn-post-view
           .post=${post}
           mode="default"