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