From d446857ceaa2300ec62448cec55de76cac1c8175 Mon Sep 17 00:00:00 2001
From: Emma Segal-Grossman <hi@emma.cafe>
Date: Tue, 23 Apr 2024 19:16:58 -0400
Subject: [PATCH] Quick fix: hoist tooltips in archived item list (#1738)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Now that we're using a bunch of tooltips, I found when there are very
few items listed the tooltips sometimes get squished in weird ways —
this fixes that.
---
 .../features/archived-items/archived-item-list.ts  | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/frontend/src/features/archived-items/archived-item-list.ts b/frontend/src/features/archived-items/archived-item-list.ts
index f2d1086c..2f43a8b5 100644
--- a/frontend/src/features/archived-items/archived-item-list.ts
+++ b/frontend/src/features/archived-items/archived-item-list.ts
@@ -87,14 +87,17 @@ export class ArchivedItemListItem extends TailwindElement {
       typeIcon = "upload";
     }
 
-    const notApplicable = html`<sl-tooltip content=${msg("Not applicable")}>
+    const notApplicable = html`<sl-tooltip
+      hoist
+      content=${msg("Not applicable")}
+    >
       <sl-icon
         name="slash"
         class="text-base text-neutral-400"
         label=${msg("Not applicable")}
       ></sl-icon>
     </sl-tooltip>`;
-    const none = html`<sl-tooltip content=${msg("None")}>
+    const none = html`<sl-tooltip hoist content=${msg("None")}>
       <sl-icon
         name="slash"
         class="text-base text-neutral-400"
@@ -152,6 +155,7 @@ export class ArchivedItemListItem extends TailwindElement {
                   content=${msg(str`${typeLabel}: ${crawlStatus.label}`)}
                   @sl-hide=${(e: SlHideEvent) => e.stopPropagation()}
                   @sl-after-hide=${(e: SlHideEvent) => e.stopPropagation()}
+                  hoist
                 >
                   <sl-icon
                     class="text-base"
@@ -162,6 +166,7 @@ export class ArchivedItemListItem extends TailwindElement {
                 </sl-tooltip>
               `}
           <sl-tooltip
+            hoist
             content=${activeQAStats
               ? msg(
                   str`QA Analysis: ${qaStatus.label} (${activeProgress}% finished)`,
@@ -217,6 +222,7 @@ export class ArchivedItemListItem extends TailwindElement {
           <sl-tooltip
             content=${msg(str`By ${this.item.userName}`)}
             @click=${this.onTooltipClick}
+            hoist
           >
             <sl-format-date
               lang=${getLocale()}
@@ -232,6 +238,7 @@ export class ArchivedItemListItem extends TailwindElement {
         </btrix-table-cell>
         <btrix-table-cell>
           <sl-tooltip
+            hoist
             content=${formatNumber(this.item.fileSize || 0, {
               style: "unit",
               unit: "byte",
@@ -250,6 +257,7 @@ export class ArchivedItemListItem extends TailwindElement {
           ${isUpload
             ? notApplicable
             : html`<sl-tooltip
+                hoist
                 @click=${this.onTooltipClick}
                 content=${msg(
                   str`${formatNumber(
@@ -273,6 +281,7 @@ export class ArchivedItemListItem extends TailwindElement {
             : lastQAStarted && qaRunCount
               ? html`
                   <sl-tooltip
+                    hoist
                     content=${msg(
                       str`Last run started on ${formatISODateString(lastQAStarted)}`,
                     )}
@@ -290,6 +299,7 @@ export class ArchivedItemListItem extends TailwindElement {
           ${isUpload
             ? notApplicable
             : html`<sl-tooltip
+                hoist
                 @click=${this.onTooltipClick}
                 content=${this.item.reviewStatus
                   ? msg(