fix(DBTabs): arrows not appearing on window resize (#4812)

* Initial plan

* Fix DBTabs arrows not appearing on window resize

Co-authored-by: mfranzke <787658+mfranzke@users.noreply.github.com>

* chore: refactor window resize listener by moving it to own file

* Update .changeset/fix-dbtabs-arrows-on-resize.md

Co-authored-by: Maximilian Franzke <787658+mfranzke@users.noreply.github.com>

* chore: refactor window-resize-listener.ts with resizeObserver

* Update packages/components/src/components/tabs/tabs.lite.tsx

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Update packages/components/src/components/tabs/tabs.lite.tsx

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* chore: revert index.html for tabs

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: Maximilian Franzke <787658+mfranzke@users.noreply.github.com>
Co-authored-by: Nicolas Merget <nicolas.merget@deutschebahn.com>
Co-authored-by: Michael Kraus <michael.m.kraus@deutschebahn.com>
Co-authored-by: Nicolas Merget <104347736+nmerget@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Author: 5 people

.changeset/fix-dbtabs-arrows-on-resize.md

@@ -0,0 +1,10 @@
+---
+"@db-ux/core-components": patch
+"@db-ux/ngx-core-components": patch
+"@db-ux/react-core-components": patch
+"@db-ux/v-core-components": patch
+"@db-ux/wc-core-components": patch
+---
+
+fix(DBTabs): ensure navigation arrows appear correctly on window resize
+This update resolves an issue where navigation arrows in DBTabs would not appear or update correctly when the window was resized. The component now properly responds to resize events, ensuring arrows are always shown or hidden as needed.

packages/components/src/components/tabs/model.ts

@@ -88,6 +88,7 @@ export type DBTabsDefaultState = {
 	initTabList: () => void;
 	initTabs: (init?: boolean) => void;
 	handleChange: (event: InputEvent<HTMLElement>) => void;
+	_resizeObserver?: ResizeObserver;
 };
 
 export type DBTabsState = DBTabsDefaultState & GlobalState & InitializedState;

packages/components/src/components/tabs/tabs.lite.tsx

@@ -1,6 +1,7 @@
 import {
 	For,
 	onMount,
+	onUnMount,
 	onUpdate,
 	Show,
 	useDefaultProps,
@@ -30,6 +31,7 @@ export default function DBTabs(props: DBTabsProps) {
 		showScrollLeft: false,
 		showScrollRight: false,
 		scrollContainer: null,
+		_resizeObserver: undefined,
 		convertTabs(): DBSimpleTabProps[] {
 			try {
 				if (typeof props.tabs === 'string') {
@@ -80,6 +82,14 @@ export default function DBTabs(props: DBTabsProps) {
 							container.addEventListener('scroll', () => {
 								state.evaluateScrollButtons(container);
 							});
+							// Use ResizeObserver to re-evaluate scroll buttons because it provides more accurate, container-specific resize detection than global window resize events.
+							if (!state._resizeObserver) {
+								const observer = new ResizeObserver(() => {
+									state.evaluateScrollButtons(container);
+								});
+								observer.observe(container);
+								state._resizeObserver = observer;
+							}
 						}
 					}
 				}
@@ -186,6 +196,11 @@ export default function DBTabs(props: DBTabsProps) {
 	});
 	// jscpd:ignore-end
 
+	onUnMount(() => {
+		state._resizeObserver?.disconnect();
+		state._resizeObserver = undefined;
+	});
+
 	onUpdate(() => {
 		if (_ref && state.initialized) {
 			state.initTabList();