Refactor DashboardTabs and Clean Up CSS Styles

- Removed unnecessary CSS rules from App.css to streamline styles.
- Refactored DashboardTabs component to improve readability and maintainability by restructuring imports and simplifying the tab addition logic.
- Enhanced the handleAddTab function to ensure proper scrolling behavior when new tabs are added.

assets/stylesheets/App.css

@@ -192,10 +192,6 @@
   bottom: 0;
 }
 
-.dashboard-menu-container-navigation-labels:after {
-  right: -6px;
-}
-
 .electron-navigation-leading,
 .electron-navigation-trailing {
   align-self: stretch;

src/components/Dashboard/common/DashboardTabs.jsx

@@ -1,5 +1,12 @@
 import PropTypes from 'prop-types'
-import { useCallback, useEffect, useLayoutEffect, useRef, useState, memo } from 'react'
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+  memo
+} from 'react'
 import { Button, Flex, Popover, Typography } from 'antd'
 import DashboardTabPreview from './DashboardTabPreview'
 import classNames from 'classnames'
@@ -9,7 +16,10 @@ import XMarkIcon from '../../Icons/XMarkIcon'
 import HomeIcon from '../../Icons/HomeIcon'
 import { getModelByName } from '../../../database/ObjectModels'
 import { getSidebarIconComponent } from '../../Icons/sidebarIconMap'
-import { useNavigationTabs, useTabPreview } from '../context/NavigationTabsContext'
+import {
+  useNavigationTabs,
+  useTabPreview
+} from '../context/NavigationTabsContext'
 import { getDesktopWindowId } from '../../../electrobun-bridge.js'
 import { hasExternalTabDrag, writeTabDragData } from './tabDrag'
 
@@ -509,31 +519,6 @@ const useActiveTabStickyScroll = (activeTabId, tabs) => {
     if (!lastTab || pendingScrollTabIdRef.current !== lastTab.id) {
       return undefined
     }
-
-    const list = listRef.current
-    const scrollEl = rootRef.current?.querySelector(
-      '.simplebar-content-wrapper'
-    )
-    const outlineEl = list?.lastElementChild?.querySelector(
-      '.dashboard-tab-item-outline-container'
-    )
-    if (!scrollEl || !outlineEl) return undefined
-
-    const scrollToEndIfReady = () => {
-      if (outlineEl.getBoundingClientRect().width <= 36) return false
-      scrollEl.scrollLeft = scrollEl.scrollWidth
-      pendingScrollTabIdRef.current = null
-      return true
-    }
-
-    if (scrollToEndIfReady()) return undefined
-
-    const observer = new ResizeObserver(() => {
-      if (scrollToEndIfReady()) observer.disconnect()
-    })
-    observer.observe(outlineEl)
-
-    return () => observer.disconnect()
   }, [activeTabId, tabs])
 
   return { rootRef, listRef, cloneRef, lineRef }
@@ -711,6 +696,34 @@ const DashboardTabs = () => {
     selectTab(tabs[nextIndex].id)
   }
 
+  const handleAddTab = () => {
+    addTab()
+
+    const scrollEl = rootRef.current?.querySelector(
+      '.simplebar-content-wrapper'
+    )
+
+    if (!scrollEl) return
+
+    let lastMaxScrollLeft = scrollEl.scrollWidth - scrollEl.clientWidth
+    let unchangedChecks = 0
+
+    const interval = setInterval(() => {
+      const maxScrollLeft = scrollEl.scrollWidth - scrollEl.clientWidth
+      if (maxScrollLeft !== lastMaxScrollLeft) {
+        scrollEl.scrollLeft = maxScrollLeft
+        lastMaxScrollLeft = maxScrollLeft
+        unchangedChecks = 0
+      } else {
+        unchangedChecks++
+      }
+
+      if (unchangedChecks >= 15) {
+        clearInterval(interval)
+      }
+    }, 10)
+  }
+
   const isReordering = draggedValue != null || dropTarget != null
   const activeTab = tabs.find((tab) => tab.id === activeTabId)
   const activeTabIndex = activeTab
@@ -790,7 +803,7 @@ const DashboardTabs = () => {
             <Button
               type='text'
               className='dashboard-tabs-add-button electrobun-webkit-app-region-no-drag'
-              onClick={addTab}
+              onClick={handleAddTab}
               icon={<PlusIcon style={{ fontSize: 14, marginTop: 3 }} />}
             />
           </div>