fix in tables

Author: SuaYoo

frontend/src/features/crawls/crawl-list/crawl-list-item.ts

@@ -71,9 +71,11 @@ export class CrawlListItem extends BtrixElement {
 
     return html`
       <btrix-table-row
-        class=${this.href
-          ? "cursor-pointer select-none transition-colors hover:bg-neutral-50 focus-within:bg-neutral-50 duration-fast"
-          : ""}
+        class=${
+          this.href
+            ? "cursor-pointer select-none transition-colors hover:bg-neutral-50 focus-within:bg-neutral-50 duration-fast"
+            : ""
+        }
         @click=${async (e: MouseEvent) => {
           if (e.target === this.dropdownMenu) {
             return;
@@ -95,30 +97,34 @@ export class CrawlListItem extends BtrixElement {
           )}
         </btrix-table-cell>
         <btrix-table-cell rowClickTarget=${this.href ? "a" : nothing}>
-          ${this.href
-            ? html`<a href=${this.href} @click=${this.navigate.link}>
-                ${label}
-              </a>`
-            : label}
+          ${
+            this.href
+              ? html`<a href=${this.href} @click=${this.navigate.link}>
+                  ${label}
+                </a>`
+              : label
+          }
         </btrix-table-cell>
-        ${this.workflowId
-          ? nothing
-          : html`
-              <btrix-table-cell>
-                ${this.safeRender(
-                  (crawl) => html`
-                    <btrix-format-date
-                      date=${crawl.started}
-                      month="2-digit"
-                      day="2-digit"
-                      year="numeric"
-                      hour="2-digit"
-                      minute="2-digit"
-                    ></btrix-format-date>
-                  `,
-                )}
-              </btrix-table-cell>
-            `}
+        ${
+          this.workflowId
+            ? nothing
+            : html`
+                <btrix-table-cell>
+                  ${this.safeRender(
+                    (crawl) => html`
+                      <btrix-format-date
+                        date=${crawl.started}
+                        month="2-digit"
+                        day="2-digit"
+                        year="numeric"
+                        hour="2-digit"
+                        minute="2-digit"
+                      ></btrix-format-date>
+                    `,
+                  )}
+                </btrix-table-cell>
+              `
+        }
         <btrix-table-cell>
           ${this.safeRender((crawl) =>
             crawl.finished
@@ -138,11 +144,9 @@ export class CrawlListItem extends BtrixElement {
         <btrix-table-cell>
           ${this.safeRender((crawl) =>
             !skipped
-              ? html`<span
-                  >${humanizeExecutionSeconds(crawl.crawlExecSeconds, {
-                    style: "short",
-                  })}</span
-                >`
+              ? humanizeExecutionSeconds(crawl.crawlExecSeconds, {
+                  style: "short",
+                })
               : notApplicable,
           )}
         </btrix-table-cell>

frontend/src/utils/executionTimeFormatter.ts

@@ -1,7 +1,9 @@
+import clsx from "clsx";
 import { html, nothing } from "lit";
 import { ifDefined } from "lit/directives/if-defined.js";
 
 import localize from "./localize";
+import { tw } from "./tailwind";
 
 /**
  * Returns either `nothing`, or hours-minutes-seconds wrapped in parens.
@@ -161,19 +163,24 @@ export const humanizeExecutionSeconds = (
       : "";
 
   switch (style) {
-    case "long":
+    case "long": {
+      const tooltip = fullMinutes !== compactMinutes ? fullMinutes : undefined;
       return html`<span
-        title="${ifDefined(
-          fullMinutes !== compactMinutes ? fullMinutes : undefined,
-        )}"
+        class=${clsx(
+          // Place above 'rowClickTarget' in tables if tooltip is available
+          tooltip && tw`z-[1]`,
+        )}
+        title=${ifDefined(tooltip)}
         >${prefix}${detailsRelevant ? formattedDetails : compactMinutes}</span
       >`;
+    }
     case "short":
       return html`<span
+        class="z-[1]"
         title="${displaySeconds && seconds < 60 ? fullSeconds : fullMinutes}"
-        >${prefix}${displaySeconds && seconds < 60
-          ? compactSeconds
-          : compactMinutes}</span
+        >${prefix}${
+          displaySeconds && seconds < 60 ? compactSeconds : compactMinutes
+        }</span
       >`;
   }
 };