From 1697f3bb6a156648ad3d28101c53523a9fb96e02 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jan-David=20St=C3=BCtz?=
 <39377488+J-x-D@users.noreply.github.com>
Date: Thu, 12 Feb 2026 13:23:38 +0100
Subject: [PATCH 1/5] Implement overflow handling for TagList component

---
 src/components/Tag/TagList.tsx                | 184 +++++++++++++++++-
 .../Tag/stories/TagList.stories.tsx           |  16 ++
 2 files changed, 190 insertions(+), 10 deletions(-)

diff --git a/src/components/Tag/TagList.tsx b/src/components/Tag/TagList.tsx
index 6aed6706c..d8f02b7bb 100644
--- a/src/components/Tag/TagList.tsx
+++ b/src/components/Tag/TagList.tsx
@@ -1,21 +1,177 @@
 import React from "react";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import Tag from "./Tag";
+import Tooltip from "../Tooltip/Tooltip";
 
 export interface TagListProps extends React.HTMLAttributes<HTMLUListElement> {
     label?: string;
 }
 
 function TagList({ children, className = "", label = "", ...otherProps }: TagListProps) {
+    const containerRef = React.useRef<HTMLUListElement>(null);
+    const measurementRef = React.useRef<HTMLUListElement>(null);
+    const moreTagRef = React.useRef<HTMLLIElement>(null);
+    const [visibleCount, setVisibleCount] = React.useState<number | null>(null);
+
+    const childArray = React.Children.toArray(children).filter(Boolean);
+
+    React.useEffect(() => {
+        const checkOverflow = () => {
+            if (!containerRef.current || !measurementRef.current || !moreTagRef.current || childArray.length === 0) {
+                return;
+            }
+
+            const container = containerRef.current;
+            const measurement = measurementRef.current;
+            const containerWidth = container.clientWidth;
+
+            // If no size constraints, show all tags
+            if (containerWidth === 0) {
+                setVisibleCount(null);
+                return;
+            }
+
+            const items = Array.from(measurement.children).filter(
+                (child) => !(child as HTMLElement).dataset.moreTag
+            ) as HTMLLIElement[];
+
+            if (items.length === 0) {
+                setVisibleCount(null);
+                return;
+            }
+
+            // Get the actual width of the "+X more" tag
+            const moreTagWidth = moreTagRef.current.offsetWidth;
+
+            let totalWidth = 0;
+            let count = 0;
+
+            // Calculate how many items fit in one row
+            for (let i = 0; i < items.length; i++) {
+                const item = items[i];
+                const itemWidth = item.offsetWidth;
+
+                if (totalWidth + itemWidth <= containerWidth) {
+                    totalWidth += itemWidth;
+                    count++;
+                } else {
+                    // This item doesn't fit
+                    break;
+                }
+            }
+
+            // If not all items fit, adjust count to leave room for "+X more" tag
+            if (count < childArray.length) {
+                let adjustedWidth = 0;
+                let adjustedCount = 0;
+
+                for (let i = 0; i < count; i++) {
+                    const item = items[i];
+                    const itemWidth = item.offsetWidth;
+
+                    if (adjustedWidth + itemWidth + moreTagWidth <= containerWidth) {
+                        adjustedWidth += itemWidth;
+                        adjustedCount++;
+                    } else {
+                        break;
+                    }
+                }
+
+                // Ensure at least one tag is visible before the "+X more" tag
+                // Only show overflow if we have at least 1 visible tag
+                if (adjustedCount > 0) {
+                    setVisibleCount(adjustedCount);
+                } else {
+                    // If no tags fit with the "+X more" tag, show all tags instead
+                    setVisibleCount(null);
+                }
+            } else {
+                // All items fit
+                setVisibleCount(null);
+            }
+        };
+
+        // Use RAF to ensure DOM is ready
+        requestAnimationFrame(() => {
+            checkOverflow();
+        });
+
+        // Watch for size changes
+        const resizeObserver = new ResizeObserver(() => {
+            requestAnimationFrame(checkOverflow);
+        });
+        if (containerRef.current) {
+            resizeObserver.observe(containerRef.current);
+        }
+
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, [childArray.length]);
+
+    const showOverflowTag = visibleCount !== null && visibleCount < childArray.length;
+    const visibleChildren = showOverflowTag ? childArray.slice(0, visibleCount) : childArray;
+    const hiddenCount = childArray.length - (visibleCount ?? childArray.length);
+
     const tagList = (
-        <ul className={`${eccgui}-tag__list` + (className && !label ? " " + className : "")} {...otherProps}>
-            {React.Children.map(children, (child, i) => {
-                return child ? (
-                    <li className={`${eccgui}-tag__list-item`} key={"tagitem_" + i}>
-                        {child}
-                    </li>
-                ) : null;
-            })}
+        <ul
+            className={`${eccgui}-tag__list` + (className && !label ? " " + className : "")}
+            {...otherProps}
+            style={{ ...otherProps.style, display: 'flex', flexWrap: 'nowrap', overflow: 'hidden' }}
+            ref={containerRef}
+        >
+            {visibleChildren.map((child, i) => (
+                <li className={`${eccgui}-tag__list-item`} key={"tagitem_" + i}>
+                    {child}
+                </li>
+            ))}
+            {showOverflowTag && (
+                <li className={`${eccgui}-tag__list-item`} key="overflow-tag">
+                    <Tooltip
+                        content={
+                            <div style={{ display: 'flex', flexWrap: 'wrap', gap: '4px', maxWidth: '400px' }}>
+                                {childArray.map((child, i) => (
+                                    <React.Fragment key={"tooltip-tag-" + i}>{child}</React.Fragment>
+                                ))}
+                            </div>
+                        }
+                        size="large"
+                    >
+                        <Tag small>+{hiddenCount} more</Tag>
+                    </Tooltip>
+                </li>
+            )}
+        </ul>
+    );
+
+    // Hidden measurement list - always rendered for measurements
+    const measurementList = (
+        <ul
+            style={{
+                position: 'absolute',
+                visibility: 'hidden',
+                display: 'flex',
+                flexWrap: 'nowrap',
+                pointerEvents: 'none',
+                width: containerRef.current?.clientWidth ?? '100%',
+            }}
+            aria-hidden="true"
+            ref={measurementRef}
+        >
+            {childArray.map((child, i) => (
+                <li className={`${eccgui}-tag__list-item`} key={"measure_" + i}>
+                    {child}
+                </li>
+            ))}
+            <li
+                className={`${eccgui}-tag__list-item`}
+                key="measure-more-tag"
+                ref={moreTagRef}
+                data-more-tag="true"
+            >
+                <Tag small>+{childArray.length} more</Tag>
+            </li>
         </ul>
     );
 
@@ -23,12 +179,20 @@ function TagList({ children, className = "", label = "", ...otherProps }: TagLis
         return (
             <div className={`${eccgui}-tag__list-wrapper` + (className ? " " + className : "")}>
                 <strong className={`${eccgui}-tag__list-label`}>{label}</strong>
-                <span className={`${eccgui}-tag__list-content`}>{tagList}</span>
+                <span className={`${eccgui}-tag__list-content`} style={{ position: 'relative' }}>
+                    {tagList}
+                    {measurementList}
+                </span>
             </div>
         );
     }
 
-    return tagList;
+    return (
+        <div style={{ position: 'relative' }}>
+            {tagList}
+            {measurementList}
+        </div>
+    );
 }
 
 export default TagList;
diff --git a/src/components/Tag/stories/TagList.stories.tsx b/src/components/Tag/stories/TagList.stories.tsx
index 27221c360..a4bddda92 100644
--- a/src/components/Tag/stories/TagList.stories.tsx
+++ b/src/components/Tag/stories/TagList.stories.tsx
@@ -20,3 +20,19 @@ List.args = {
     label: "Tag list",
     children: [<Tag small>Short</Tag>, <Tag>List</Tag>, <Tag>Of</Tag>, <Tag large>Tags</Tag>],
 };
+
+export const ListWithOverflow = Template.bind({});
+ListWithOverflow.args = {
+    label: "Tag list with overflow",
+    style: { width: '300px' },
+    children: [
+        <Tag>First Tag</Tag>,
+        <Tag>Second Tag</Tag>,
+        <Tag>Third Tag</Tag>,
+        <Tag>Fourth Tag</Tag>,
+        <Tag>Fifth Tag</Tag>,
+        <Tag>Sixth Tag</Tag>,
+        <Tag>Seventh Tag</Tag>,
+        <Tag>Eighth Tag</Tag>,
+    ],
+};

From eb48d86cc27ab1eabfd69a81e1ff23d7d9340607 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jan-David=20St=C3=BCtz?=
 <39377488+J-x-D@users.noreply.github.com>
Date: Thu, 12 Feb 2026 15:19:57 +0100
Subject: [PATCH 2/5] Remove ListWithOverflow story from TagList

Removed the ListWithOverflow story from TagList stories.
---
 src/components/Tag/stories/TagList.stories.tsx | 16 ----------------
 1 file changed, 16 deletions(-)

diff --git a/src/components/Tag/stories/TagList.stories.tsx b/src/components/Tag/stories/TagList.stories.tsx
index a4bddda92..27221c360 100644
--- a/src/components/Tag/stories/TagList.stories.tsx
+++ b/src/components/Tag/stories/TagList.stories.tsx
@@ -20,19 +20,3 @@ List.args = {
     label: "Tag list",
     children: [<Tag small>Short</Tag>, <Tag>List</Tag>, <Tag>Of</Tag>, <Tag large>Tags</Tag>],
 };
-
-export const ListWithOverflow = Template.bind({});
-ListWithOverflow.args = {
-    label: "Tag list with overflow",
-    style: { width: '300px' },
-    children: [
-        <Tag>First Tag</Tag>,
-        <Tag>Second Tag</Tag>,
-        <Tag>Third Tag</Tag>,
-        <Tag>Fourth Tag</Tag>,
-        <Tag>Fifth Tag</Tag>,
-        <Tag>Sixth Tag</Tag>,
-        <Tag>Seventh Tag</Tag>,
-        <Tag>Eighth Tag</Tag>,
-    ],
-};

From 40dd128503b3092b35a17bf7d8e7410f72471284 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jan-David=20St=C3=BCtz?=
 <39377488+J-x-D@users.noreply.github.com>
Date: Mon, 16 Feb 2026 15:16:02 +0100
Subject: [PATCH 3/5] optimize overflow handling and improve accessibility; add
 storybook example

---
 src/components/Tag/TagList.tsx                | 61 +++++++++++--------
 .../Tag/stories/TagList.stories.tsx           | 22 +++++++
 2 files changed, 59 insertions(+), 24 deletions(-)

diff --git a/src/components/Tag/TagList.tsx b/src/components/Tag/TagList.tsx
index d8f02b7bb..4004924c2 100644
--- a/src/components/Tag/TagList.tsx
+++ b/src/components/Tag/TagList.tsx
@@ -1,9 +1,10 @@
 import React from "react";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
-import Tag from "./Tag";
 import Tooltip from "../Tooltip/Tooltip";
 
+import Tag from "./Tag";
+
 export interface TagListProps extends React.HTMLAttributes<HTMLUListElement> {
     label?: string;
 }
@@ -14,9 +15,11 @@ function TagList({ children, className = "", label = "", ...otherProps }: TagLis
     const moreTagRef = React.useRef<HTMLLIElement>(null);
     const [visibleCount, setVisibleCount] = React.useState<number | null>(null);
 
-    const childArray = React.Children.toArray(children).filter(Boolean);
+    const childArray = React.useMemo(() => React.Children.toArray(children).filter(Boolean), [children]);
 
     React.useEffect(() => {
+        let rafId: number | null = null;
+
         const checkOverflow = () => {
             if (!containerRef.current || !measurementRef.current || !moreTagRef.current || childArray.length === 0) {
                 return;
@@ -93,22 +96,28 @@ function TagList({ children, className = "", label = "", ...otherProps }: TagLis
         };
 
         // Use RAF to ensure DOM is ready
-        requestAnimationFrame(() => {
+        rafId = requestAnimationFrame(() => {
             checkOverflow();
         });
 
         // Watch for size changes
         const resizeObserver = new ResizeObserver(() => {
-            requestAnimationFrame(checkOverflow);
+            if (rafId !== null) {
+                cancelAnimationFrame(rafId);
+            }
+            rafId = requestAnimationFrame(checkOverflow);
         });
         if (containerRef.current) {
             resizeObserver.observe(containerRef.current);
         }
 
         return () => {
+            if (rafId !== null) {
+                cancelAnimationFrame(rafId);
+            }
             resizeObserver.disconnect();
         };
-    }, [childArray.length]);
+    }, [childArray]);
 
     const showOverflowTag = visibleCount !== null && visibleCount < childArray.length;
     const visibleChildren = showOverflowTag ? childArray.slice(0, visibleCount) : childArray;
@@ -118,19 +127,21 @@ function TagList({ children, className = "", label = "", ...otherProps }: TagLis
         <ul
             className={`${eccgui}-tag__list` + (className && !label ? " " + className : "")}
             {...otherProps}
-            style={{ ...otherProps.style, display: 'flex', flexWrap: 'nowrap', overflow: 'hidden' }}
+            role="list"
+            aria-label={label || "Tag list"}
+            style={{ ...otherProps.style, display: "flex", flexWrap: "nowrap", overflow: "hidden" }}
             ref={containerRef}
         >
             {visibleChildren.map((child, i) => (
-                <li className={`${eccgui}-tag__list-item`} key={"tagitem_" + i}>
+                <li className={`${eccgui}-tag__list-item`} role="listitem" key={"tagitem_" + i}>
                     {child}
                 </li>
             ))}
             {showOverflowTag && (
-                <li className={`${eccgui}-tag__list-item`} key="overflow-tag">
+                <li className={`${eccgui}-tag__list-item`} role="listitem" key="overflow-tag">
                     <Tooltip
                         content={
-                            <div style={{ display: 'flex', flexWrap: 'wrap', gap: '4px', maxWidth: '400px' }}>
+                            <div style={{ display: "flex", flexWrap: "wrap", gap: "4px", maxWidth: "400px" }}>
                                 {childArray.map((child, i) => (
                                     <React.Fragment key={"tooltip-tag-" + i}>{child}</React.Fragment>
                                 ))}
@@ -138,7 +149,14 @@ function TagList({ children, className = "", label = "", ...otherProps }: TagLis
                         }
                         size="large"
                     >
-                        <Tag small>+{hiddenCount} more</Tag>
+                        <Tag
+                            small
+                            aria-label={`${hiddenCount} more ${
+                                hiddenCount === 1 ? "tag" : "tags"
+                            } hidden. Hover to see all ${childArray.length} tags.`}
+                        >
+                            +{hiddenCount} more
+                        </Tag>
                     </Tooltip>
                 </li>
             )}
@@ -149,12 +167,12 @@ function TagList({ children, className = "", label = "", ...otherProps }: TagLis
     const measurementList = (
         <ul
             style={{
-                position: 'absolute',
-                visibility: 'hidden',
-                display: 'flex',
-                flexWrap: 'nowrap',
-                pointerEvents: 'none',
-                width: containerRef.current?.clientWidth ?? '100%',
+                position: "absolute",
+                visibility: "hidden",
+                display: "flex",
+                flexWrap: "nowrap",
+                pointerEvents: "none",
+                width: containerRef.current?.clientWidth ?? "100%",
             }}
             aria-hidden="true"
             ref={measurementRef}
@@ -164,12 +182,7 @@ function TagList({ children, className = "", label = "", ...otherProps }: TagLis
                     {child}
                 </li>
             ))}
-            <li
-                className={`${eccgui}-tag__list-item`}
-                key="measure-more-tag"
-                ref={moreTagRef}
-                data-more-tag="true"
-            >
+            <li className={`${eccgui}-tag__list-item`} key="measure-more-tag" ref={moreTagRef} data-more-tag="true">
                 <Tag small>+{childArray.length} more</Tag>
             </li>
         </ul>
@@ -179,7 +192,7 @@ function TagList({ children, className = "", label = "", ...otherProps }: TagLis
         return (
             <div className={`${eccgui}-tag__list-wrapper` + (className ? " " + className : "")}>
                 <strong className={`${eccgui}-tag__list-label`}>{label}</strong>
-                <span className={`${eccgui}-tag__list-content`} style={{ position: 'relative' }}>
+                <span className={`${eccgui}-tag__list-content`} style={{ position: "relative" }}>
                     {tagList}
                     {measurementList}
                 </span>
@@ -188,7 +201,7 @@ function TagList({ children, className = "", label = "", ...otherProps }: TagLis
     }
 
     return (
-        <div style={{ position: 'relative' }}>
+        <div style={{ position: "relative" }}>
             {tagList}
             {measurementList}
         </div>
diff --git a/src/components/Tag/stories/TagList.stories.tsx b/src/components/Tag/stories/TagList.stories.tsx
index 27221c360..c9c5f95bb 100644
--- a/src/components/Tag/stories/TagList.stories.tsx
+++ b/src/components/Tag/stories/TagList.stories.tsx
@@ -20,3 +20,25 @@ List.args = {
     label: "Tag list",
     children: [<Tag small>Short</Tag>, <Tag>List</Tag>, <Tag>Of</Tag>, <Tag large>Tags</Tag>],
 };
+
+export const ListWithOverflow: StoryFn<typeof TagList> = () => (
+    <div style={{ maxWidth: "240px", border: "1px solid #ddd", padding: "16px" }}>
+        <TagList label="Programming Languages">
+            <Tag small>JavaScript</Tag>
+            <Tag small>TypeScript</Tag>
+            <Tag small>Python</Tag>
+            <Tag small>Java</Tag>
+            <Tag small>C++</Tag>
+            <Tag small>Ruby</Tag>
+            <Tag small>Go</Tag>
+            <Tag small>Rust</Tag>
+        </TagList>
+    </div>
+);
+ListWithOverflow.parameters = {
+    docs: {
+        description: {
+            story: 'When tags exceed the container width, a "+X more" button appears. Hover over it to see all tags in a tooltip.',
+        },
+    },
+};

From 6df74c15b93f6877eb1e4607cf013237097c5dd6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jan-David=20St=C3=BCtz?=
 <39377488+J-x-D@users.noreply.github.com>
Date: Thu, 19 Feb 2026 08:52:14 +0100
Subject: [PATCH 4/5] Enhance TagList component with improved overflow handling
 and styling; update storybook example

---
 src/components/Tag/TagList.tsx                | 38 ++++++++-------
 .../Tag/stories/TagList.stories.tsx           |  2 +-
 src/components/Tag/tag.scss                   | 46 +++++++++++++++++++
 src/components/Tooltip/tooltip.scss           |  4 ++
 4 files changed, 72 insertions(+), 18 deletions(-)

diff --git a/src/components/Tag/TagList.tsx b/src/components/Tag/TagList.tsx
index 4004924c2..ddb72b32f 100644
--- a/src/components/Tag/TagList.tsx
+++ b/src/components/Tag/TagList.tsx
@@ -82,12 +82,13 @@ function TagList({ children, className = "", label = "", ...otherProps }: TagLis
                 }
 
                 // Ensure at least one tag is visible before the "+X more" tag
-                // Only show overflow if we have at least 1 visible tag
                 if (adjustedCount > 0) {
                     setVisibleCount(adjustedCount);
                 } else {
-                    // If no tags fit with the "+X more" tag, show all tags instead
-                    setVisibleCount(null);
+                    // No tags fit alongside the "+X more" tag (e.g. first tag is very wide).
+                    // Force 1 visible tag so the overflow indicator is still shown;
+                    // CSS (min-width: 0 + overflow: hidden on the li) handles clipping.
+                    setVisibleCount(1);
                 }
             } else {
                 // All items fit
@@ -129,19 +130,28 @@ function TagList({ children, className = "", label = "", ...otherProps }: TagLis
             {...otherProps}
             role="list"
             aria-label={label || "Tag list"}
-            style={{ ...otherProps.style, display: "flex", flexWrap: "nowrap", overflow: "hidden" }}
             ref={containerRef}
         >
             {visibleChildren.map((child, i) => (
-                <li className={`${eccgui}-tag__list-item`} role="listitem" key={"tagitem_" + i}>
+                <li
+                    className={
+                        `${eccgui}-tag__list-item` + (showOverflowTag ? ` ${eccgui}-tag__list-item--overflow` : "")
+                    }
+                    role="listitem"
+                    key={"tagitem_" + i}
+                >
                     {child}
                 </li>
             ))}
             {showOverflowTag && (
-                <li className={`${eccgui}-tag__list-item`} role="listitem" key="overflow-tag">
+                <li
+                    className={`${eccgui}-tag__list-item ${eccgui}-tag__list-item--more`}
+                    role="listitem"
+                    key="overflow-tag"
+                >
                     <Tooltip
                         content={
-                            <div style={{ display: "flex", flexWrap: "wrap", gap: "4px", maxWidth: "400px" }}>
+                            <div className={`${eccgui}-tag__list-overflow-content`}>
                                 {childArray.map((child, i) => (
                                     <React.Fragment key={"tooltip-tag-" + i}>{child}</React.Fragment>
                                 ))}
@@ -166,14 +176,8 @@ function TagList({ children, className = "", label = "", ...otherProps }: TagLis
     // Hidden measurement list - always rendered for measurements
     const measurementList = (
         <ul
-            style={{
-                position: "absolute",
-                visibility: "hidden",
-                display: "flex",
-                flexWrap: "nowrap",
-                pointerEvents: "none",
-                width: containerRef.current?.clientWidth ?? "100%",
-            }}
+            className={`${eccgui}-tag__list--measure`}
+            style={{ width: containerRef.current?.clientWidth ?? "100%" }}
             aria-hidden="true"
             ref={measurementRef}
         >
@@ -192,7 +196,7 @@ function TagList({ children, className = "", label = "", ...otherProps }: TagLis
         return (
             <div className={`${eccgui}-tag__list-wrapper` + (className ? " " + className : "")}>
                 <strong className={`${eccgui}-tag__list-label`}>{label}</strong>
-                <span className={`${eccgui}-tag__list-content`} style={{ position: "relative" }}>
+                <span className={`${eccgui}-tag__list-content`}>
                     {tagList}
                     {measurementList}
                 </span>
@@ -201,7 +205,7 @@ function TagList({ children, className = "", label = "", ...otherProps }: TagLis
     }
 
     return (
-        <div style={{ position: "relative" }}>
+        <div className={`${eccgui}-tag__list-container` + (className ? " " + className : "")}>
             {tagList}
             {measurementList}
         </div>
diff --git a/src/components/Tag/stories/TagList.stories.tsx b/src/components/Tag/stories/TagList.stories.tsx
index c9c5f95bb..6d09d1161 100644
--- a/src/components/Tag/stories/TagList.stories.tsx
+++ b/src/components/Tag/stories/TagList.stories.tsx
@@ -24,13 +24,13 @@ List.args = {
 export const ListWithOverflow: StoryFn<typeof TagList> = () => (
     <div style={{ maxWidth: "240px", border: "1px solid #ddd", padding: "16px" }}>
         <TagList label="Programming Languages">
+            <Tag small>Goooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</Tag>
             <Tag small>JavaScript</Tag>
             <Tag small>TypeScript</Tag>
             <Tag small>Python</Tag>
             <Tag small>Java</Tag>
             <Tag small>C++</Tag>
             <Tag small>Ruby</Tag>
-            <Tag small>Go</Tag>
             <Tag small>Rust</Tag>
         </TagList>
     </div>
diff --git a/src/components/Tag/tag.scss b/src/components/Tag/tag.scss
index 8abfb2e12..a6e31afcc 100644
--- a/src/components/Tag/tag.scss
+++ b/src/components/Tag/tag.scss
@@ -272,6 +272,52 @@ $tag-round-adjustment: 0 !default;
     }
 }
 
+.#{$eccgui}-tag__list {
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: flex-start;
+    overflow: hidden;
+}
+
+.#{$eccgui}-tag__list-content {
+    position: relative;
+}
+
+.#{$eccgui}-tag__list-container {
+    position: relative;
+    display: flex;
+    align-items: center;
+}
+
+.#{$eccgui}-tag__list--measure {
+    position: absolute;
+    display: flex;
+    visibility: hidden;
+    flex-wrap: nowrap;
+    pointer-events: none;
+}
+
+.#{$eccgui}-tag__list-item--overflow {
+    min-width: 0;
+    overflow: hidden;
+}
+
+.#{$eccgui}-tag__list-item--more {
+    flex-shrink: 0;
+    align-items: flex-start;
+
+    > .#{$eccgui}-tooltip__wrapper {
+        align-self: flex-start;
+    }
+}
+
+.#{$eccgui}-tag__list-overflow-content {
+    display: flex;
+    flex-wrap: wrap;
+    gap: $eccgui-size-margin-tag;
+    max-width: 400px;
+}
+
 @media print {
     .#{$eccgui}-tag__item {
         print-color-adjust: exact;
diff --git a/src/components/Tooltip/tooltip.scss b/src/components/Tooltip/tooltip.scss
index 3e9678bee..b40c466ae 100644
--- a/src/components/Tooltip/tooltip.scss
+++ b/src/components/Tooltip/tooltip.scss
@@ -34,6 +34,10 @@ $tooltip-padding-horizontal: $eccgui-size-block-whitespace * 0.5; // !default;
 }
 
 .#{$eccgui}-tooltip__wrapper:not(.#{$ns}-tooltip-indicator) {
+    display: flex;
+    align-items: flex-start;
+    padding: 0;
+    margin: 0;
     cursor: inherit;
 }
 

From 970558fb95e5c0034eb1634ffe2abaa30ca8b88c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jan-David=20St=C3=BCtz?=
 <39377488+J-x-D@users.noreply.github.com>
Date: Thu, 19 Feb 2026 09:21:10 +0100
Subject: [PATCH 5/5] Add mock implementation for ResizeObserver in
 setupTests.js

---
 src/test/setupTests.js | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/test/setupTests.js b/src/test/setupTests.js
index 192736502..9a4b38ce5 100644
--- a/src/test/setupTests.js
+++ b/src/test/setupTests.js
@@ -1,7 +1,16 @@
 import "regenerator-runtime/runtime";
 
-if (window.document) {
-    window.document.body.createTextRange = function () {
+// In jsdom (which Jest uses), globalThis === window — they're the same object. jsdom sets up the global environment to mimic a browser, so globalThis.document is identical to window.document.
+// In plain Node.js (where ESLint runs), globalThis exists but has no document property, so the if (globalThis.document) guard correctly skips the block.
+// So yes, it works correctly in all three contexts: browser, jsdom, and Node.js.
+globalThis.ResizeObserver = class ResizeObserver {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+};
+
+if (globalThis.document) {
+    globalThis.document.body.createTextRange = function () {
         return {
             setEnd: function () {},
             setStart: function () {},