handle long names

Author: SuaYoo

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

@@ -206,15 +206,16 @@ export class CrawlListItem extends BtrixElement {
           )}
         </btrix-table-cell>
         <btrix-table-cell>
-          <div class="max-w-sm truncate">
-            ${this.safeRender(
-              (crawl) =>
-                html`<btrix-user-chip
+          ${this.safeRender(
+            (crawl) =>
+              html`<sl-tooltip content=${crawl.userName}
+                ><btrix-user-chip
+                  class="max-w-full"
                   userId=${crawl.userid}
                   userName=${crawl.userName}
-                ></btrix-user-chip>`,
-            )}
-          </div>
+                ></btrix-user-chip
+              ></sl-tooltip>`,
+          )}
         </btrix-table-cell>
         <btrix-table-cell class="pl-1 pr-1">
           ${this.renderActions()}

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

@@ -64,11 +64,11 @@ export class CrawlList extends TailwindElement {
       this.workflowId ? undefined : "36ch", // Name
       "22ch", // Started
       "22ch", // Finished
-      "15ch", // Execution time
-      "10ch", // Pages
-      "12ch", // Size
-      "auto", // Run by
-      "[clickable-end] min-content",
+      "auto", // Execution time
+      "auto", // Pages
+      "auto", // Size
+      "[clickable-end] 20ch", // Run by
+      "min-content",
     ]
       .filter((v) => v)
       .join(" ");

frontend/src/features/users/user-chip.ts

@@ -16,7 +16,13 @@ export class UserChip extends BtrixElement {
   render() {
     if (!this.userName) return;
 
-    return html`<btrix-badge pill outline size="large" .role=${null}>
+    return html`<btrix-badge
+      class="max-w-full part-[base]:justify-start part-[base]:truncate"
+      pill
+      outline
+      size="large"
+      .role=${null}
+    >
       ${this.userName}
     </btrix-badge>`;
   }