From b54669fd260013541ae696024475fa3a56bc6cf6 Mon Sep 17 00:00:00 2001
From: Tom Butcher <thomasbutcher15@gmail.com>
Date: Sun, 20 Sep 2026 21:50:21 +0100
Subject: [PATCH] Enhance DashboardTabs Interaction and Scrolling Behavior

- Added unique IDs to dashboard tab items for improved accessibility and interaction.
- Implemented handleSelectTab function to manage tab selection and ensure proper scrolling behavior when tabs are selected, enhancing user experience.
---
 .../Dashboard/common/DashboardTabs.jsx        | 32 ++++++++++++++++++-
 1 file changed, 31 insertions(+), 1 deletion(-)

diff --git a/src/components/Dashboard/common/DashboardTabs.jsx b/src/components/Dashboard/common/DashboardTabs.jsx
index 2bbc511d..b2857383 100644
--- a/src/components/Dashboard/common/DashboardTabs.jsx
+++ b/src/components/Dashboard/common/DashboardTabs.jsx
@@ -142,6 +142,7 @@ const DashboardTabItem = memo(function DashboardTabItem({
       draggable
       onDragStart={(event) => onDragStart(event, tab.id)}
       onDragEnd={onDragEnd}
+      id={`dashboard-tab-item-${tab.id}`}
       onClick={() => onClick(tab.id)}
       onKeyDown={(event) => onKeyDown(event, tabIndex)}
       onDragOver={(event) => onDragOver(event, tab)}
@@ -730,10 +731,39 @@ const DashboardTabs = () => {
     ? tabs.findIndex((tab) => tab.id === activeTabId)
     : 0
 
+  const handleSelectTab = (tabId) => {
+    selectTab(tabId)
+
+    const scrollEl = rootRef.current?.querySelector(
+      '.simplebar-content-wrapper'
+    )
+
+    if (!scrollEl) return
+
+    const tabItem = document.getElementById(`dashboard-tab-item-${tabId}`)
+
+    if (!tabItem) return
+
+    const tabItemRect = tabItem.getBoundingClientRect()
+    const scrollRect = scrollEl.getBoundingClientRect()
+
+    const offset = 50
+
+    // Tab is off-screen to the left
+    if (tabItemRect.left < scrollRect.left) {
+      scrollEl.scrollLeft -= scrollRect.left - tabItemRect.left + offset
+    }
+
+    // Tab is off-screen to the right
+    else if (tabItemRect.right > scrollRect.right) {
+      scrollEl.scrollLeft += tabItemRect.right - scrollRect.right + offset
+    }
+  }
+
   const tabItemProps = {
     onDragStart: handleItemDragStart,
     onDragEnd: handleItemDragEnd,
-    onClick: selectTab,
+    onClick: handleSelectTab,
     onKeyDown: handleKeyDown,
     onDragOver: handleItemDragOver,
     onDrop: handleItemDrop,