Improve tab scrolling with arrows

frontend/src/pages/admin/ThemeSettings.tsx

@@ -7,6 +7,7 @@ import { useSidebar } from '../../contexts/SidebarContext';
 import type { SidebarMode } from '../../contexts/SidebarContext';
 import { ChromePicker, HuePicker } from 'react-color';
 import { SwipeTabs } from '../../components/SwipeTabs';
+import TabsScroller from '../../components/TabsScroller';
 import '../../styles/ThemeSettings.css';
 
 type ThemeTab = 'colors' | 'appearance' | 'preview' | 'advanced';
@@ -660,7 +661,7 @@ export default function ThemeSettings() {
             )}
             {/* Modern Tab Navigation */}
             <div className="page-tabs-container">
-                <div className="page-tabs-slider">
+                <TabsScroller className="page-tabs-slider">
                     <button className="mobile-menu-btn" onClick={toggleMobileMenu} aria-label={t.theme.toggleMenu}>
                         <span className="material-symbols-outlined">menu</span>
                     </button>
@@ -706,7 +707,7 @@ export default function ThemeSettings() {
                             <span>{t.theme.advancedTab}</span>
                         </button>
                     )}
-                </div>
+                </TabsScroller>
             </div>
 
             <SwipeTabs