Add scroll shadow calculation to tabs component for improved UX

stijnpotters1 · stijnpotters1 · commit 881855dc0906 · 2026-05-26T18:00:32.000+02:00
diff --git a/src/main/frontend/app/components/tabs/tabs.tsx b/src/main/frontend/app/components/tabs/tabs.tsx
@@ -63,6 +63,7 @@ export function TabsView<T extends string>({ tabs, activeTab, onSelectTab, onClo
         ref={tabsListReference}
         style={{ scrollbarWidth: 'none' }}
         className="m-0 flex rotate-x-180 flex-nowrap overflow-x-auto p-0 whitespace-nowrap [&::-webkit-scrollbar]:hidden"
+        onScroll={calculateScrollShadows}
       >
         {entries.map(([key, tab]) => (
           <Tab

Original file line number	Diff line number	Diff line change
`@@ -63,6 +63,7 @@ export function TabsView<T extends string>({ tabs, activeTab, onSelectTab, onClo`
`63`	`63`	`ref={tabsListReference}`
`64`	`64`	`style={{ scrollbarWidth: 'none' }}`
`65`	`65`	`className="m-0 flex rotate-x-180 flex-nowrap overflow-x-auto p-0 whitespace-nowrap [&::-webkit-scrollbar]:hidden"`
	`66`	`+ onScroll={calculateScrollShadows}`
`66`	`67`	`>`
`67`	`68`	`{entries.map(([key, tab]) => (`
`68`	`69`	`<Tab`