From 4c1766044f3e7953e7dae3a274cb862b8dab7b2d Mon Sep 17 00:00:00 2001
From: Tom Butcher <thomasbutcher15@gmail.com>
Date: Sun, 20 Sep 2026 22:38:52 +0100
Subject: [PATCH] Update DashboardTabs for Improved ID Handling and Scrolling
 Logic

- Added `htmlId` prop to `DashboardTabItem` for better accessibility and unique identification of tab items.
- Adjusted scrolling logic to account for offset, enhancing the user experience when navigating through tabs.
---
 src/components/Dashboard/common/DashboardTabs.jsx | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/components/Dashboard/common/DashboardTabs.jsx b/src/components/Dashboard/common/DashboardTabs.jsx
index b2857383..8f02b325 100644
--- a/src/components/Dashboard/common/DashboardTabs.jsx
+++ b/src/components/Dashboard/common/DashboardTabs.jsx
@@ -77,6 +77,7 @@ DashboardTabLabel.propTypes = {
 }
 
 const DashboardTabItem = memo(function DashboardTabItem({
+  htmlId = undefined,
   tab,
   tabIndex,
   isSelected,
@@ -142,7 +143,7 @@ const DashboardTabItem = memo(function DashboardTabItem({
       draggable
       onDragStart={(event) => onDragStart(event, tab.id)}
       onDragEnd={onDragEnd}
-      id={`dashboard-tab-item-${tab.id}`}
+      id={htmlId}
       onClick={() => onClick(tab.id)}
       onKeyDown={(event) => onKeyDown(event, tabIndex)}
       onDragOver={(event) => onDragOver(event, tab)}
@@ -190,6 +191,7 @@ const DashboardTabItem = memo(function DashboardTabItem({
 DashboardTabItem.displayName = 'DashboardTabItem'
 
 DashboardTabItem.propTypes = {
+  htmlId: PropTypes.string,
   tab: PropTypes.shape({
     id: PropTypes.string.isRequired,
     title: PropTypes.string,
@@ -749,13 +751,13 @@ const DashboardTabs = () => {
 
     const offset = 50
 
-    // Tab is off-screen to the left
-    if (tabItemRect.left < scrollRect.left) {
+    // Tab is too close to / off-screen on the left
+    if (tabItemRect.left < scrollRect.left + offset) {
       scrollEl.scrollLeft -= scrollRect.left - tabItemRect.left + offset
     }
 
-    // Tab is off-screen to the right
-    else if (tabItemRect.right > scrollRect.right) {
+    // Tab is too close to / off-screen on the right
+    else if (tabItemRect.right > scrollRect.right - offset) {
       scrollEl.scrollLeft += tabItemRect.right - scrollRect.right + offset
     }
   }
@@ -816,6 +818,7 @@ const DashboardTabs = () => {
                     tabIndex={index}
                     isSelected={isSelected}
                     isDragging={isDragging}
+                    htmlId={`dashboard-tab-item-${tab.id}`}
                     dropPosition={
                       isDropTarget
                         ? dropTarget.insertBefore