From 6de8764013cc1650e165b1e238f852428adaaa82 Mon Sep 17 00:00:00 2001
From: sua yoo <sua@suayoo.com>
Date: Wed, 19 Nov 2025 18:17:14 -0800
Subject: [PATCH 1/8] set max width

---
 frontend/src/components/ui/tag-input.ts | 3 +++
 frontend/src/components/ui/tag.ts       | 5 ++++-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/ui/tag-input.ts b/frontend/src/components/ui/tag-input.ts
index 9540b1993e..0260270a04 100644
--- a/frontend/src/components/ui/tag-input.ts
+++ b/frontend/src/components/ui/tag-input.ts
@@ -16,6 +16,8 @@ import {
 import { customElement, property, query, state } from "lit/decorators.js";
 import debounce from "lodash/fp/debounce";
 
+import { TAG_MAX_CHARACTERS } from "./tag";
+
 import type { UnderlyingFunction } from "@/types/utils";
 import { type WorkflowTag } from "@/types/workflow";
 import { dropdown } from "@/utils/css";
@@ -234,6 +236,7 @@ export class TagInput extends LitElement {
               role="combobox"
               aria-controls="dropdown"
               aria-expanded="${this.dropdownIsOpen === true}"
+              maxlength=${TAG_MAX_CHARACTERS}
             />
             <div
               id="dropdown"
diff --git a/frontend/src/components/ui/tag.ts b/frontend/src/components/ui/tag.ts
index 0cb3ee5a13..01944179f6 100644
--- a/frontend/src/components/ui/tag.ts
+++ b/frontend/src/components/ui/tag.ts
@@ -3,6 +3,8 @@ import { css, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 
+export const TAG_MAX_CHARACTERS = 40;
+
 /**
  * Customized <sl-tag>
  *
@@ -55,7 +57,8 @@ export class Tag extends SLTag {
       }
 
       .tag__content {
-        max-width: 100%;
+        display: inline-block;
+        max-width: ${TAG_MAX_CHARACTERS}ch;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;

From 08823647c274adf265115a52c533dfb2ff27e3a5 Mon Sep 17 00:00:00 2001
From: sua yoo <sua@suayoo.com>
Date: Wed, 19 Nov 2025 20:08:33 -0800
Subject: [PATCH 2/8] add containing componnet

---
 frontend/src/components/ui/contained-tags.ts  | 121 ++++++++++++++++++
 frontend/src/components/ui/index.ts           |   1 +
 .../components/ContainedTags.stories.ts       |  30 +++++
 .../src/stories/components/ContainedTags.ts   |  11 ++
 4 files changed, 163 insertions(+)
 create mode 100644 frontend/src/components/ui/contained-tags.ts
 create mode 100644 frontend/src/stories/components/ContainedTags.stories.ts
 create mode 100644 frontend/src/stories/components/ContainedTags.ts

diff --git a/frontend/src/components/ui/contained-tags.ts b/frontend/src/components/ui/contained-tags.ts
new file mode 100644
index 0000000000..c6db8d7ab4
--- /dev/null
+++ b/frontend/src/components/ui/contained-tags.ts
@@ -0,0 +1,121 @@
+import { css, html, nothing } from "lit";
+import {
+  customElement,
+  query,
+  queryAssignedElements,
+  state,
+} from "lit/decorators.js";
+import debounce from "lodash/fp/debounce";
+
+import type { Popover } from "./popover";
+
+import { TailwindElement } from "@/classes/TailwindElement";
+import type { Tag } from "@/components/ui/tag";
+import type { UnderlyingFunction } from "@/types/utils";
+import localize from "@/utils/localize";
+import { tw } from "@/utils/tailwind";
+
+/**
+ * Displays all the tags that can be contained to one line.
+ * Other tags are displayed in a popover.
+ */
+@customElement("btrix-contained-tags")
+export class ContainedTags extends TailwindElement {
+  static styles = css`
+    :host {
+      /* display: contents; */
+      outline: 2px solid red;
+      --width: 100%;
+    }
+  `;
+
+  @query("#container")
+  private readonly container?: HTMLElement | null;
+
+  @query("btrix-popover")
+  private readonly remainderPopover?: Popover | null;
+
+  @queryAssignedElements()
+  private readonly tags!: Tag[];
+
+  @state()
+  public remainder?: number;
+
+  #popoverContent?: HTMLElement;
+
+  render() {
+    return html`
+      <sl-resize-observer
+        @sl-resize=${this.debouncedCalculate as UnderlyingFunction<
+          typeof this.calculate
+        >}
+      >
+        <div class="flex gap-2">
+          <div
+            id="container"
+            class="flex h-6 w-[var(--width)] max-w-[calc(100%-4ch)] flex-wrap gap-x-1.5 overflow-hidden outline"
+          >
+            <slot @slotchange=${this.calculate}></slot>
+          </div>
+
+          ${this.remainder
+            ? html`<btrix-popover hoist>
+                <btrix-badge>+${localize.number(this.remainder)}</btrix-badge>
+              </btrix-popover>`
+            : nothing}
+        </div>
+      </sl-resize-observer>
+    `;
+  }
+
+  private readonly calculate = async () => {
+    if (!this.tags.length || !this.container) return;
+
+    const containerRect = this.container.getBoundingClientRect();
+    const containerTop = containerRect.top;
+
+    // Reset width
+    this.style.setProperty("--width", "100%");
+
+    const idx = this.tags.findIndex(
+      (el) => el.getBoundingClientRect().top > containerTop,
+    );
+
+    const lastVisible = this.tags[idx - 1];
+
+    if (lastVisible as unknown) {
+      const rect = lastVisible.getBoundingClientRect();
+
+      // Decrease width of container to match end of last visible tag
+      this.style.setProperty(
+        "--width",
+        `${rect.left - containerRect.left + rect.width}px`,
+      );
+    }
+
+    // Clone remaining elements into popover
+    const remaining = this.tags.slice(idx);
+    const popoverContent = document.createElement("div");
+
+    popoverContent.classList.add(tw`flex`, tw`flex-wrap`, tw`gap-1.5`);
+    popoverContent.setAttribute("slot", "content");
+
+    remaining.forEach((el) => {
+      popoverContent.appendChild(el.cloneNode(true));
+    });
+
+    this.remainder = remaining.length;
+
+    await this.updateComplete;
+
+    if (this.#popoverContent) {
+      this.remainderPopover?.removeChild(this.#popoverContent);
+    }
+    if (this.remainder) {
+      this.remainderPopover?.appendChild(popoverContent);
+    }
+    this.#popoverContent = popoverContent;
+  };
+
+  private readonly debouncedCalculate = debounce(50)(this.calculate);
+}
diff --git a/frontend/src/components/ui/index.ts b/frontend/src/components/ui/index.ts
index 9c631de3a0..82eca7e40d 100644
--- a/frontend/src/components/ui/index.ts
+++ b/frontend/src/components/ui/index.ts
@@ -16,6 +16,7 @@ import("./combobox");
 import("./config-details");
 import("./copy-button");
 import("./copy-field");
+import("./contained-tags");
 import("./data-grid");
 import("./details");
 import("./file-input");
diff --git a/frontend/src/stories/components/ContainedTags.stories.ts b/frontend/src/stories/components/ContainedTags.stories.ts
new file mode 100644
index 0000000000..cceec79a30
--- /dev/null
+++ b/frontend/src/stories/components/ContainedTags.stories.ts
@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from "@storybook/web-components";
+import { html } from "lit";
+
+import { renderComponent, type RenderProps } from "./ContainedTags";
+
+const meta = {
+  title: "Components/Contained Tags",
+  component: "btrix-contain-with-remainder",
+  tags: ["autodocs"],
+  render: renderComponent,
+  argTypes: {},
+} satisfies Meta<RenderProps>;
+
+export default meta;
+type Story = StoryObj<RenderProps>;
+
+export const Basic: Story = {
+  args: {
+    content: html`<btrix-tag>Social Media</btrix-tag>
+      <btrix-tag>Marketing</btrix-tag> <btrix-tag>Tooling</btrix-tag>
+      <btrix-tag>High Priority</btrix-tag> <btrix-tag>Low Priority</btrix-tag>
+      <btrix-tag>Dev</btrix-tag>
+      <btrix-tag>Approved</btrix-tag>
+      <btrix-tag>Rejected</btrix-tag>
+      <btrix-tag>Good</btrix-tag>
+      <btrix-tag>Bad</btrix-tag>
+      <btrix-tag>2024</btrix-tag> <btrix-tag>2025</btrix-tag>
+      <btrix-tag>2026</btrix-tag>`,
+  },
+};
diff --git a/frontend/src/stories/components/ContainedTags.ts b/frontend/src/stories/components/ContainedTags.ts
new file mode 100644
index 0000000000..b6664b8a4d
--- /dev/null
+++ b/frontend/src/stories/components/ContainedTags.ts
@@ -0,0 +1,11 @@
+import { html, type TemplateResult } from "lit";
+
+import type { ContainedTags } from "@/components/ui/contained-tags";
+
+import "@/components/ui/contained-tags";
+
+export type RenderProps = ContainedTags & { content: TemplateResult };
+
+export const renderComponent = ({ content }: Partial<RenderProps>) => {
+  return html`<btrix-contained-tags>${content}</btrix-contained-tags>`;
+};

From e8bbf383a661d9a8ec643bcf83fb27175dbb43df Mon Sep 17 00:00:00 2001
From: sua yoo <sua@suayoo.com>
Date: Wed, 19 Nov 2025 20:36:58 -0800
Subject: [PATCH 3/8] improve debounce

---
 frontend/src/components/ui/contained-tags.ts | 70 ++++++++++++++------
 1 file changed, 49 insertions(+), 21 deletions(-)

diff --git a/frontend/src/components/ui/contained-tags.ts b/frontend/src/components/ui/contained-tags.ts
index c6db8d7ab4..cc6211356c 100644
--- a/frontend/src/components/ui/contained-tags.ts
+++ b/frontend/src/components/ui/contained-tags.ts
@@ -1,6 +1,8 @@
-import { css, html, nothing } from "lit";
+import clsx from "clsx";
+import { css, html } from "lit";
 import {
   customElement,
+  property,
   query,
   queryAssignedElements,
   state,
@@ -11,24 +13,30 @@ import type { Popover } from "./popover";
 
 import { TailwindElement } from "@/classes/TailwindElement";
 import type { Tag } from "@/components/ui/tag";
-import type { UnderlyingFunction } from "@/types/utils";
 import localize from "@/utils/localize";
 import { tw } from "@/utils/tailwind";
 
 /**
  * Displays all the tags that can be contained to one line.
- * Other tags are displayed in a popover.
+ * Overflowing tags are displayed in a popover.
  */
 @customElement("btrix-contained-tags")
 export class ContainedTags extends TailwindElement {
   static styles = css`
     :host {
-      /* display: contents; */
-      outline: 2px solid red;
-      --width: 100%;
+      display: contents;
+      --internal-width: 100%;
     }
   `;
 
+  /**
+   * Maximum number of possible tags.
+   * This number is used to preserve space for the remainder badge
+   * when calculating width after line clamping.
+   */
+  @property({ type: Number })
+  maxTags = 100;
+
   @query("#container")
   private readonly container?: HTMLElement | null;
 
@@ -42,45 +50,67 @@ export class ContainedTags extends TailwindElement {
   public remainder?: number;
 
   #popoverContent?: HTMLElement;
+  #resized = false;
+
+  disconnectedCallback(): void {
+    this.debouncedCalculate.cancel();
+    super.disconnectedCallback();
+  }
 
   render() {
     return html`
       <sl-resize-observer
-        @sl-resize=${this.debouncedCalculate as UnderlyingFunction<
-          typeof this.calculate
-        >}
+        @sl-resize=${() => {
+          if (!this.#resized) {
+            // Don't debounce first resize
+            this.calculate();
+            this.#resized = true;
+            return;
+          }
+
+          this.debouncedCalculate();
+        }}
       >
         <div class="flex gap-2">
           <div
             id="container"
-            class="flex h-6 w-[var(--width)] max-w-[calc(100%-4ch)] flex-wrap gap-x-1.5 overflow-hidden outline"
+            class="flex h-6 w-[var(--internal-width)] flex-wrap gap-x-1.5 overflow-hidden"
           >
-            <slot @slotchange=${this.calculate}></slot>
+            <slot
+              @slotchange=${() => {
+                this.debouncedCalculate.cancel();
+                this.calculate();
+              }}
+            ></slot>
           </div>
 
-          ${this.remainder
-            ? html`<btrix-popover hoist>
-                <btrix-badge>+${localize.number(this.remainder)}</btrix-badge>
-              </btrix-popover>`
-            : nothing}
+          <btrix-popover hoist>
+            <btrix-badge
+              class=${clsx(!this.remainder && tw`invisible`)}
+              aria-hidden=${this.remainder ? "false" : "true"}
+              >+${localize.number(this.remainder || this.maxTags)}</btrix-badge
+            >
+          </btrix-popover>
         </div>
       </sl-resize-observer>
     `;
   }
 
-  private readonly calculate = async () => {
+  private readonly calculate = () => {
     if (!this.tags.length || !this.container) return;
 
     const containerRect = this.container.getBoundingClientRect();
     const containerTop = containerRect.top;
 
     // Reset width
-    this.style.setProperty("--width", "100%");
+    this.style.setProperty("--internal-width", "100%");
 
     const idx = this.tags.findIndex(
       (el) => el.getBoundingClientRect().top > containerTop,
     );
 
+    if (idx === -1) return;
+
     const lastVisible = this.tags[idx - 1];
 
     if (lastVisible as unknown) {
@@ -88,7 +118,7 @@ export class ContainedTags extends TailwindElement {
 
       // Decrease width of container to match end of last visible tag
       this.style.setProperty(
-        "--width",
+        "--internal-width",
         `${rect.left - containerRect.left + rect.width}px`,
       );
     }
@@ -106,8 +136,6 @@ export class ContainedTags extends TailwindElement {
 
     this.remainder = remaining.length;
 
-    await this.updateComplete;
-
     if (this.#popoverContent) {
       this.remainderPopover?.removeChild(this.#popoverContent);
     }

From b355de988027aa9ea57d6c5641c2b1673590bcc5 Mon Sep 17 00:00:00 2001
From: sua yoo <sua@suayoo.com>
Date: Wed, 19 Nov 2025 21:03:57 -0800
Subject: [PATCH 4/8] use in browser profile

---
 frontend/src/components/ui/contained-tags.ts  | 37 +++++++++----------
 .../src/pages/org/browser-profiles-list.ts    | 24 ++++--------
 .../components/ContainedTags.stories.ts       |  3 ++
 3 files changed, 28 insertions(+), 36 deletions(-)

diff --git a/frontend/src/components/ui/contained-tags.ts b/frontend/src/components/ui/contained-tags.ts
index cc6211356c..932054a8d2 100644
--- a/frontend/src/components/ui/contained-tags.ts
+++ b/frontend/src/components/ui/contained-tags.ts
@@ -13,19 +13,21 @@ import type { Popover } from "./popover";
 
 import { TailwindElement } from "@/classes/TailwindElement";
 import type { Tag } from "@/components/ui/tag";
+import type { UnderlyingFunction } from "@/types/utils";
 import localize from "@/utils/localize";
 import { tw } from "@/utils/tailwind";
 
 /**
  * Displays all the tags that can be contained to one line.
  * Overflowing tags are displayed in a popover.
+ *
+ * @cssproperty width
  */
 @customElement("btrix-contained-tags")
 export class ContainedTags extends TailwindElement {
   static styles = css`
     :host {
-      display: contents;
-      --internal-width: 100%;
+      --width: 100%;
     }
   `;
 
@@ -50,7 +52,6 @@ export class ContainedTags extends TailwindElement {
   public remainder?: number;
 
   #popoverContent?: HTMLElement;
-  #resized = false;
 
   disconnectedCallback(): void {
     this.debouncedCalculate.cancel();
@@ -60,21 +61,14 @@ export class ContainedTags extends TailwindElement {
   render() {
     return html`
       <sl-resize-observer
-        @sl-resize=${() => {
-          if (!this.#resized) {
-            // Don't debounce first resize
-            this.calculate();
-            this.#resized = true;
-            return;
-          }
-
-          this.debouncedCalculate();
-        }}
+        @sl-resize=${this.debouncedCalculate as UnderlyingFunction<
+          typeof this.calculate
+        >}
       >
-        <div class="flex gap-2">
+        <div class="flex items-center gap-2">
           <div
             id="container"
-            class="flex h-6 w-[var(--internal-width)] flex-wrap gap-x-1.5 overflow-hidden"
+            class="flex h-6 w-[var(--width)] flex-wrap gap-x-1.5 overflow-hidden contain-content"
           >
             <slot
               @slotchange=${() => {
@@ -84,7 +78,7 @@ export class ContainedTags extends TailwindElement {
             ></slot>
           </div>
 
-          <btrix-popover hoist>
+          <btrix-popover hoist placement="right">
             <btrix-badge
               class=${clsx(!this.remainder && tw`invisible`)}
               aria-hidden=${this.remainder ? "false" : "true"}
@@ -103,7 +97,7 @@ export class ContainedTags extends TailwindElement {
     const containerTop = containerRect.top;
 
     // Reset width
-    this.style.setProperty("--internal-width", "100%");
+    this.style.setProperty("--width", "100%");
 
     const idx = this.tags.findIndex(
       (el) => el.getBoundingClientRect().top > containerTop,
@@ -118,7 +112,7 @@ export class ContainedTags extends TailwindElement {
 
       // Decrease width of container to match end of last visible tag
       this.style.setProperty(
-        "--internal-width",
+        "--width",
         `${rect.left - containerRect.left + rect.width}px`,
       );
     }
@@ -127,7 +121,12 @@ export class ContainedTags extends TailwindElement {
     const remaining = this.tags.slice(idx);
     const popoverContent = document.createElement("div");
 
-    popoverContent.classList.add(tw`flex`, tw`flex-wrap`, tw`gap-1.5`);
+    popoverContent.classList.add(
+      tw`flex`,
+      tw`flex-wrap`,
+      tw`gap-1.5`,
+      tw`z-50`,
+    );
     popoverContent.setAttribute("slot", "content");
 
     remaining.forEach((el) => {
diff --git a/frontend/src/pages/org/browser-profiles-list.ts b/frontend/src/pages/org/browser-profiles-list.ts
index f5da641665..cf6d60f2d1 100644
--- a/frontend/src/pages/org/browser-profiles-list.ts
+++ b/frontend/src/pages/org/browser-profiles-list.ts
@@ -66,12 +66,11 @@ const DEFAULT_SORT_BY = {
 } as const satisfies SortBy;
 const INITIAL_PAGE_SIZE = 20;
 const FILTER_BY_CURRENT_USER_STORAGE_KEY = "btrix.filterByCurrentUser.crawls";
-const MAX_TAGS = 3;
 
 const columnsCss = [
   "min-content", // Status
   "[clickable-start] minmax(min-content, 1fr)", // Name
-  "minmax(max-content, 1fr)", // Tags
+  "30ch", // Tags
   "minmax(max-content, 1fr)", // Origins
   "minmax(min-content, 20ch)", // Last modified
   "[clickable-end] min-content", // Actions
@@ -523,8 +522,6 @@ export class BrowserProfilesList extends BtrixElement {
       ) || data.created;
     const startingUrl = data.origins[0];
     const otherOrigins = data.origins.slice(1);
-    const firstTags = data.tags.slice(0, MAX_TAGS);
-    const otherTags = data.tags.slice(MAX_TAGS);
 
     return html`
       <btrix-table-row
@@ -550,19 +547,12 @@ export class BrowserProfilesList extends BtrixElement {
           >
         </btrix-table-cell>
         <btrix-table-cell>
-          <div class="flex flex-wrap gap-1.5">
-            ${firstTags.map((tag) => html`<btrix-tag>${tag}</btrix-tag>`)}
-          </div>
-          ${otherTags.length
-            ? html`<btrix-popover placement="right" hoist>
-                <btrix-badge
-                  >+${this.localize.number(otherTags.length)}</btrix-badge
-                >
-                <div slot="content" class="flex flex-wrap gap-1.5">
-                  ${otherTags.map((tag) => html`<btrix-tag>${tag}</btrix-tag>`)}
-                </div>
-              </btrix-popover>`
-            : nothing}
+          <btrix-contained-tags
+            class="relative hover:z-[2]"
+            maxTags=${data.tags.length}
+          >
+            ${data.tags.map((tag) => html`<btrix-tag>${tag}</btrix-tag>`)}
+          </btrix-contained-tags>
         </btrix-table-cell>
         <btrix-table-cell>
           <btrix-code language="url" value=${startingUrl} noWrap></btrix-code>
diff --git a/frontend/src/stories/components/ContainedTags.stories.ts b/frontend/src/stories/components/ContainedTags.stories.ts
index cceec79a30..482eee6fa1 100644
--- a/frontend/src/stories/components/ContainedTags.stories.ts
+++ b/frontend/src/stories/components/ContainedTags.stories.ts
@@ -14,6 +14,9 @@ const meta = {
 export default meta;
 type Story = StoryObj<RenderProps>;
 
+/**
+ * Resize your browser window to see the remaining tags update.
+ */
 export const Basic: Story = {
   args: {
     content: html`<btrix-tag>Social Media</btrix-tag>

From d963510752906ba4ffa9c65a5dd3e688e37fa6d9 Mon Sep 17 00:00:00 2001
From: sua yoo <sua@suayoo.com>
Date: Wed, 19 Nov 2025 21:09:25 -0800
Subject: [PATCH 5/8] add some safety padding

---
 frontend/src/components/ui/tag.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/ui/tag.ts b/frontend/src/components/ui/tag.ts
index 01944179f6..a425082d15 100644
--- a/frontend/src/components/ui/tag.ts
+++ b/frontend/src/components/ui/tag.ts
@@ -58,7 +58,7 @@ export class Tag extends SLTag {
 
       .tag__content {
         display: inline-block;
-        max-width: ${TAG_MAX_CHARACTERS}ch;
+        max-width: ${TAG_MAX_CHARACTERS + 2}ch;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;

From 4ff005954171b1f2ccc9f64feeffabf56af480b4 Mon Sep 17 00:00:00 2001
From: sua yoo <sua@suayoo.com>
Date: Thu, 20 Nov 2025 11:12:12 -0800
Subject: [PATCH 6/8] update badge color to match other interactable

---
 frontend/src/components/ui/contained-tags.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/components/ui/contained-tags.ts b/frontend/src/components/ui/contained-tags.ts
index 932054a8d2..88bc0a8ca3 100644
--- a/frontend/src/components/ui/contained-tags.ts
+++ b/frontend/src/components/ui/contained-tags.ts
@@ -80,6 +80,7 @@ export class ContainedTags extends TailwindElement {
 
           <btrix-popover hoist placement="right">
             <btrix-badge
+              variant="blue"
               class=${clsx(!this.remainder && tw`invisible`)}
               aria-hidden=${this.remainder ? "false" : "true"}
               >+${localize.number(this.remainder || this.maxTags)}</btrix-badge

From 60a99e47ed3d373c21994684212a33d11d74e1a1 Mon Sep 17 00:00:00 2001
From: sua yoo <sua@suayoo.com>
Date: Mon, 24 Nov 2025 12:07:14 -0800
Subject: [PATCH 7/8] rename component

---
 frontend/src/components/ui/index.ts                   |  2 +-
 .../ui/{contained-tags.ts => tag-container.ts}        |  4 ++--
 frontend/src/pages/org/browser-profiles-list.ts       |  4 ++--
 frontend/src/stories/components/ContainedTags.ts      | 11 -----------
 ...ntainedTags.stories.ts => TagContainer.stories.ts} |  4 ++--
 frontend/src/stories/components/TagContainer.ts       | 11 +++++++++++
 6 files changed, 18 insertions(+), 18 deletions(-)
 rename frontend/src/components/ui/{contained-tags.ts => tag-container.ts} (97%)
 delete mode 100644 frontend/src/stories/components/ContainedTags.ts
 rename frontend/src/stories/components/{ContainedTags.stories.ts => TagContainer.stories.ts} (89%)
 create mode 100644 frontend/src/stories/components/TagContainer.ts

diff --git a/frontend/src/components/ui/index.ts b/frontend/src/components/ui/index.ts
index 82eca7e40d..632598bc7c 100644
--- a/frontend/src/components/ui/index.ts
+++ b/frontend/src/components/ui/index.ts
@@ -16,7 +16,7 @@ import("./combobox");
 import("./config-details");
 import("./copy-button");
 import("./copy-field");
-import("./contained-tags");
+import("./tag-container");
 import("./data-grid");
 import("./details");
 import("./file-input");
diff --git a/frontend/src/components/ui/contained-tags.ts b/frontend/src/components/ui/tag-container.ts
similarity index 97%
rename from frontend/src/components/ui/contained-tags.ts
rename to frontend/src/components/ui/tag-container.ts
index 88bc0a8ca3..91c6089bdb 100644
--- a/frontend/src/components/ui/contained-tags.ts
+++ b/frontend/src/components/ui/tag-container.ts
@@ -23,8 +23,8 @@ import { tw } from "@/utils/tailwind";
  *
  * @cssproperty width
  */
-@customElement("btrix-contained-tags")
-export class ContainedTags extends TailwindElement {
+@customElement("btrix-tag-container")
+export class TagContainer extends TailwindElement {
   static styles = css`
     :host {
       --width: 100%;
diff --git a/frontend/src/pages/org/browser-profiles-list.ts b/frontend/src/pages/org/browser-profiles-list.ts
index cf6d60f2d1..dc917f9622 100644
--- a/frontend/src/pages/org/browser-profiles-list.ts
+++ b/frontend/src/pages/org/browser-profiles-list.ts
@@ -547,12 +547,12 @@ export class BrowserProfilesList extends BtrixElement {
           >
         </btrix-table-cell>
         <btrix-table-cell>
-          <btrix-contained-tags
+          <btrix-tag-container
             class="relative hover:z-[2]"
             maxTags=${data.tags.length}
           >
             ${data.tags.map((tag) => html`<btrix-tag>${tag}</btrix-tag>`)}
-          </btrix-contained-tags>
+          </btrix-tag-container>
         </btrix-table-cell>
         <btrix-table-cell>
           <btrix-code language="url" value=${startingUrl} noWrap></btrix-code>
diff --git a/frontend/src/stories/components/ContainedTags.ts b/frontend/src/stories/components/ContainedTags.ts
deleted file mode 100644
index b6664b8a4d..0000000000
--- a/frontend/src/stories/components/ContainedTags.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { html, type TemplateResult } from "lit";
-
-import type { ContainedTags } from "@/components/ui/contained-tags";
-
-import "@/components/ui/contained-tags";
-
-export type RenderProps = ContainedTags & { content: TemplateResult };
-
-export const renderComponent = ({ content }: Partial<RenderProps>) => {
-  return html`<btrix-contained-tags>${content}</btrix-contained-tags>`;
-};
diff --git a/frontend/src/stories/components/ContainedTags.stories.ts b/frontend/src/stories/components/TagContainer.stories.ts
similarity index 89%
rename from frontend/src/stories/components/ContainedTags.stories.ts
rename to frontend/src/stories/components/TagContainer.stories.ts
index 482eee6fa1..e3a0822c56 100644
--- a/frontend/src/stories/components/ContainedTags.stories.ts
+++ b/frontend/src/stories/components/TagContainer.stories.ts
@@ -1,10 +1,10 @@
 import type { Meta, StoryObj } from "@storybook/web-components";
 import { html } from "lit";
 
-import { renderComponent, type RenderProps } from "./ContainedTags";
+import { renderComponent, type RenderProps } from "./TagContainer";
 
 const meta = {
-  title: "Components/Contained Tags",
+  title: "Components/Tag Container",
   component: "btrix-contain-with-remainder",
   tags: ["autodocs"],
   render: renderComponent,
diff --git a/frontend/src/stories/components/TagContainer.ts b/frontend/src/stories/components/TagContainer.ts
new file mode 100644
index 0000000000..701f278f8a
--- /dev/null
+++ b/frontend/src/stories/components/TagContainer.ts
@@ -0,0 +1,11 @@
+import { html, type TemplateResult } from "lit";
+
+import type { TagContainer } from "@/components/ui/tag-container";
+
+import "@/components/ui/tag-container";
+
+export type RenderProps = TagContainer & { content: TemplateResult };
+
+export const renderComponent = ({ content }: Partial<RenderProps>) => {
+  return html`<btrix-tag-container>${content}</btrix-tag-container>`;
+};

From 287e086fc76fd51159686a3d1f20fb3a6ce2718c Mon Sep 17 00:00:00 2001
From: sua yoo <sua@suayoo.com>
Date: Mon, 24 Nov 2025 12:49:29 -0800
Subject: [PATCH 8/8] refactor container

---
 frontend/src/components/ui/badge.ts           |   5 +-
 frontend/src/components/ui/code/index.ts      |   4 +-
 frontend/src/components/ui/tag-container.ts   | 112 ++++++++----------
 .../src/pages/org/browser-profiles-list.ts    |  10 +-
 .../components/TagContainer.stories.ts        |  26 ++--
 .../src/stories/components/TagContainer.ts    |   8 +-
 6 files changed, 78 insertions(+), 87 deletions(-)

diff --git a/frontend/src/components/ui/badge.ts b/frontend/src/components/ui/badge.ts
index 16bb776352..adc17f2b12 100644
--- a/frontend/src/components/ui/badge.ts
+++ b/frontend/src/components/ui/badge.ts
@@ -13,7 +13,8 @@ export type BadgeVariant =
   | "primary"
   | "cyan"
   | "blue"
-  | "high-contrast";
+  | "high-contrast"
+  | "text";
 
 /**
  * Show numeric value in a label
@@ -64,6 +65,7 @@ export class Badge extends TailwindElement {
                   primary: tw`bg-white text-primary ring-primary`,
                   cyan: tw`bg-cyan-50 text-cyan-600 ring-cyan-600`,
                   blue: tw`bg-blue-50 text-blue-600 ring-blue-600`,
+                  text: tw`text-blue-500 ring-blue-600`,
                 }[this.variant],
               ]
             : {
@@ -75,6 +77,7 @@ export class Badge extends TailwindElement {
                 primary: tw`bg-primary text-neutral-0`,
                 cyan: tw`bg-cyan-50 text-cyan-600`,
                 blue: tw`bg-blue-50 text-blue-600`,
+                text: tw`text-blue-500`,
               }[this.variant],
           this.pill
             ? [
diff --git a/frontend/src/components/ui/code/index.ts b/frontend/src/components/ui/code/index.ts
index 24f13919ea..2955bcd095 100644
--- a/frontend/src/components/ui/code/index.ts
+++ b/frontend/src/components/ui/code/index.ts
@@ -53,11 +53,11 @@ export class Code extends TailwindElement {
     }
 
     .hljs-path {
-      color: var(--sl-color-blue-900);
+      color: var(--sl-color-sky-600);
     }
 
     .hljs-domain {
-      color: var(--sl-color-blue-600);
+      color: var(--sl-color-sky-700);
     }
 
     .hljs-string {
diff --git a/frontend/src/components/ui/tag-container.ts b/frontend/src/components/ui/tag-container.ts
index 91c6089bdb..eea43fb312 100644
--- a/frontend/src/components/ui/tag-container.ts
+++ b/frontend/src/components/ui/tag-container.ts
@@ -1,16 +1,15 @@
 import clsx from "clsx";
-import { css, html } from "lit";
+import { css, html, type PropertyValues } from "lit";
 import {
   customElement,
   property,
   query,
-  queryAssignedElements,
+  queryAll,
   state,
 } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
 import debounce from "lodash/fp/debounce";
 
-import type { Popover } from "./popover";
-
 import { TailwindElement } from "@/classes/TailwindElement";
 import type { Tag } from "@/components/ui/tag";
 import type { UnderlyingFunction } from "@/types/utils";
@@ -31,60 +30,75 @@ export class TagContainer extends TailwindElement {
     }
   `;
 
-  /**
-   * Maximum number of possible tags.
-   * This number is used to preserve space for the remainder badge
-   * when calculating width after line clamping.
-   */
-  @property({ type: Number })
-  maxTags = 100;
+  @property({ type: Array })
+  tags: string[] = [];
 
   @query("#container")
   private readonly container?: HTMLElement | null;
 
-  @query("btrix-popover")
-  private readonly remainderPopover?: Popover | null;
-
-  @queryAssignedElements()
-  private readonly tags!: Tag[];
+  @queryAll("btrix-tag")
+  private readonly tagNodes!: NodeListOf<Tag>;
 
   @state()
-  public remainder?: number;
-
-  #popoverContent?: HTMLElement;
+  private displayLimit?: number;
 
   disconnectedCallback(): void {
     this.debouncedCalculate.cancel();
     super.disconnectedCallback();
   }
 
+  protected updated(changedProperties: PropertyValues): void {
+    if (changedProperties.get("tags")) {
+      this.debouncedCalculate.cancel();
+      this.calculate();
+    }
+  }
+
   render() {
+    const maxTags = this.tags.length;
+    const displayLimit = this.displayLimit;
+    const remainder = displayLimit && maxTags - displayLimit;
+
     return html`
       <sl-resize-observer
         @sl-resize=${this.debouncedCalculate as UnderlyingFunction<
           typeof this.calculate
         >}
       >
-        <div class="flex items-center gap-2">
+        <div class="flex items-center">
           <div
             id="container"
             class="flex h-6 w-[var(--width)] flex-wrap gap-x-1.5 overflow-hidden contain-content"
           >
-            <slot
-              @slotchange=${() => {
-                this.debouncedCalculate.cancel();
-                this.calculate();
-              }}
-            ></slot>
+            ${this.tags.map(
+              (tag, i) =>
+                html`<btrix-tag
+                  aria-hidden=${ifDefined(
+                    displayLimit === undefined
+                      ? undefined
+                      : i > displayLimit - 1
+                        ? "true"
+                        : "false",
+                  )}
+                  >${tag}</btrix-tag
+                >`,
+            )}
           </div>
 
           <btrix-popover hoist placement="right">
             <btrix-badge
-              variant="blue"
-              class=${clsx(!this.remainder && tw`invisible`)}
-              aria-hidden=${this.remainder ? "false" : "true"}
-              >+${localize.number(this.remainder || this.maxTags)}</btrix-badge
+              variant="text"
+              size="large"
+              class=${clsx(!remainder && tw`invisible`)}
+              aria-hidden=${remainder ? "false" : "true"}
+              tabIndex="0"
+              >+${localize.number(remainder || maxTags)}</btrix-badge
             >
+            <div slot="content" class="z-50 flex flex-wrap gap-1.5">
+              ${this.tags
+                .slice(displayLimit)
+                .map((tag) => html`<btrix-tag>${tag}</btrix-tag>`)}
+            </div>
           </btrix-popover>
         </div>
       </sl-resize-observer>
@@ -92,25 +106,23 @@ export class TagContainer extends TailwindElement {
   }
 
   private readonly calculate = () => {
-    if (!this.tags.length || !this.container) return;
+    const tagNodes = Array.from(this.tagNodes);
+
+    if (!tagNodes.length || !this.container) return;
 
     const containerRect = this.container.getBoundingClientRect();
     const containerTop = containerRect.top;
 
     // Reset width
     this.style.setProperty("--width", "100%");
-
-    const idx = this.tags.findIndex(
+    const idx = tagNodes.findIndex(
       (el) => el.getBoundingClientRect().top > containerTop,
     );
 
     if (idx === -1) return;
-
-    const lastVisible = this.tags[idx - 1];
-
+    const lastVisible = tagNodes[idx - 1];
     if (lastVisible as unknown) {
       const rect = lastVisible.getBoundingClientRect();
-
       // Decrease width of container to match end of last visible tag
       this.style.setProperty(
         "--width",
@@ -118,31 +130,7 @@ export class TagContainer extends TailwindElement {
       );
     }
 
-    // Clone remaining elements into popover
-    const remaining = this.tags.slice(idx);
-    const popoverContent = document.createElement("div");
-
-    popoverContent.classList.add(
-      tw`flex`,
-      tw`flex-wrap`,
-      tw`gap-1.5`,
-      tw`z-50`,
-    );
-    popoverContent.setAttribute("slot", "content");
-
-    remaining.forEach((el) => {
-      popoverContent.appendChild(el.cloneNode(true));
-    });
-
-    this.remainder = remaining.length;
-
-    if (this.#popoverContent) {
-      this.remainderPopover?.removeChild(this.#popoverContent);
-    }
-    if (this.remainder) {
-      this.remainderPopover?.appendChild(popoverContent);
-    }
-    this.#popoverContent = popoverContent;
+    this.displayLimit = idx;
   };
 
   private readonly debouncedCalculate = debounce(50)(this.calculate);
diff --git a/frontend/src/pages/org/browser-profiles-list.ts b/frontend/src/pages/org/browser-profiles-list.ts
index dc917f9622..394b7a2cbf 100644
--- a/frontend/src/pages/org/browser-profiles-list.ts
+++ b/frontend/src/pages/org/browser-profiles-list.ts
@@ -547,18 +547,14 @@ export class BrowserProfilesList extends BtrixElement {
           >
         </btrix-table-cell>
         <btrix-table-cell>
-          <btrix-tag-container
-            class="relative hover:z-[2]"
-            maxTags=${data.tags.length}
-          >
-            ${data.tags.map((tag) => html`<btrix-tag>${tag}</btrix-tag>`)}
+          <btrix-tag-container class="relative hover:z-[2]" .tags=${data.tags}>
           </btrix-tag-container>
         </btrix-table-cell>
-        <btrix-table-cell>
+        <btrix-table-cell class="[--btrix-table-cell-gap:0]">
           <btrix-code language="url" value=${startingUrl} noWrap></btrix-code>
           ${otherOrigins.length
             ? html`<btrix-popover placement="right" hoist>
-                <btrix-badge
+                <btrix-badge variant="text" size="large"
                   >+${this.localize.number(otherOrigins.length)}</btrix-badge
                 >
                 <ul slot="content">
diff --git a/frontend/src/stories/components/TagContainer.stories.ts b/frontend/src/stories/components/TagContainer.stories.ts
index e3a0822c56..748a5cfef6 100644
--- a/frontend/src/stories/components/TagContainer.stories.ts
+++ b/frontend/src/stories/components/TagContainer.stories.ts
@@ -1,5 +1,4 @@
 import type { Meta, StoryObj } from "@storybook/web-components";
-import { html } from "lit";
 
 import { renderComponent, type RenderProps } from "./TagContainer";
 
@@ -19,15 +18,20 @@ type Story = StoryObj<RenderProps>;
  */
 export const Basic: Story = {
   args: {
-    content: html`<btrix-tag>Social Media</btrix-tag>
-      <btrix-tag>Marketing</btrix-tag> <btrix-tag>Tooling</btrix-tag>
-      <btrix-tag>High Priority</btrix-tag> <btrix-tag>Low Priority</btrix-tag>
-      <btrix-tag>Dev</btrix-tag>
-      <btrix-tag>Approved</btrix-tag>
-      <btrix-tag>Rejected</btrix-tag>
-      <btrix-tag>Good</btrix-tag>
-      <btrix-tag>Bad</btrix-tag>
-      <btrix-tag>2024</btrix-tag> <btrix-tag>2025</btrix-tag>
-      <btrix-tag>2026</btrix-tag>`,
+    tags: [
+      "Social Media",
+      "Marketing",
+      "Tooling",
+      "High Priority",
+      "Low Priority",
+      "Dev",
+      "Approved",
+      "Rejected",
+      "Good",
+      "Bad",
+      "2024",
+      "2025",
+      "2026",
+    ],
   },
 };
diff --git a/frontend/src/stories/components/TagContainer.ts b/frontend/src/stories/components/TagContainer.ts
index 701f278f8a..db65e52eaf 100644
--- a/frontend/src/stories/components/TagContainer.ts
+++ b/frontend/src/stories/components/TagContainer.ts
@@ -1,11 +1,11 @@
-import { html, type TemplateResult } from "lit";
+import { html } from "lit";
 
 import type { TagContainer } from "@/components/ui/tag-container";
 
 import "@/components/ui/tag-container";
 
-export type RenderProps = TagContainer & { content: TemplateResult };
+export type RenderProps = TagContainer;
 
-export const renderComponent = ({ content }: Partial<RenderProps>) => {
-  return html`<btrix-tag-container>${content}</btrix-tag-container>`;
+export const renderComponent = ({ tags }: Partial<RenderProps>) => {
+  return html`<btrix-tag-container .tags=${tags || []}></btrix-tag-container>`;
 };