Improve tab scrolling with arrows

frontend/src/pages/admin/Analytics.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from '../../contexts/LanguageContext';
 import { useSidebar } from '../../contexts/SidebarContext';
+import TabsScroller from '../../components/TabsScroller';
 import { analyticsAPI } from '../../api/client';
 import type { AnalyticsOverview } from '../../api/client';
 import '../../styles/AdminAnalytics.css';
@@ -46,14 +47,14 @@ export default function Analytics() {
   return (
     <main className="main-content admin-analytics-root">
       <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>
           <div className="page-title-section">
             <span className="page-title-text">{t.analyticsPage.title}</span>
           </div>
-        </div>
+        </TabsScroller>
       </div>
 
       <div className="page-content">
@@ -151,4 +152,3 @@ export default function Analytics() {
     </main>
   );
 }
-

frontend/src/pages/admin/AuditLogs.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from '../../contexts/LanguageContext';
 import { useSidebar } from '../../contexts/SidebarContext';
+import TabsScroller from '../../components/TabsScroller';
 import { auditAPI } from '../../api/client';
 import type { AuditLogItem } from '../../api/client';
 import '../../styles/AdminAudit.css';
@@ -59,14 +60,14 @@ export default function AuditLogs() {
   return (
     <main className="main-content admin-audit-root">
       <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>
           <div className="page-title-section">
             <span className="page-title-text">{t.auditPage.title}</span>
           </div>
-        </div>
+        </TabsScroller>
       </div>
 
       <div className="page-content">
@@ -163,4 +164,3 @@ export default function AuditLogs() {
     </main>
   );
 }
-

frontend/src/pages/admin/Features.tsx

@@ -6,6 +6,7 @@ import { useModules, TOGGLEABLE_MODULES } from '../../contexts/ModulesContext';
 import type { ModuleId } from '../../contexts/ModulesContext';
 import Feature1Tab from '../../components/admin/Feature1Tab';
 import { SwipeTabs } from '../../components/SwipeTabs';
+import TabsScroller from '../../components/TabsScroller';
 import '../../styles/AdminPanel.css';
 
 type TabId = 'config' | 'dashboard' | 'feature1' | 'feature2' | 'feature3' | 'search' | 'notifications';
@@ -743,7 +744,7 @@ export default function Features() {
     return (
         <main className="main-content admin-panel-root">
             <div className="page-tabs-container">
-                <div className="page-tabs-slider" ref={tabsContainerRef}>
+                <TabsScroller className="page-tabs-slider" ref={tabsContainerRef}>
                     <button className="mobile-menu-btn" onClick={toggleMobileMenu} aria-label={t.theme.toggleMenu}>
                         <span className="material-symbols-outlined">menu</span>
                     </button>
@@ -774,7 +775,7 @@ export default function Features() {
                             </button>
                         );
                     })}
-                </div>
+                </TabsScroller>
             </div>
 
             <SwipeTabs

frontend/src/pages/admin/Settings.tsx

@@ -2,6 +2,7 @@ import { useState, useEffect } from 'react';
 import { useTranslation } from '../../contexts/LanguageContext';
 import { useSidebar } from '../../contexts/SidebarContext';
 import Sidebar from '../../components/Sidebar';
+import TabsScroller from '../../components/TabsScroller';
 import { settingsAPI } from '../../api/client';
 import '../../styles/Settings.css';
 
@@ -60,14 +61,14 @@ export default function Settings() {
             <Sidebar />
             <main className="main-content settings-root">
                 <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>
                         <div className="page-title-section">
                             <span className="page-title-text">{t.settings.title}</span>
                         </div>
-                    </div>
+                    </TabsScroller>
                 </div>
 
                 <div className="page-content page-content--narrow">

frontend/src/pages/admin/Sources.tsx

@@ -1,6 +1,7 @@
 import { useAuth } from '../../contexts/AuthContext';
 import { useTranslation } from '../../contexts/LanguageContext';
 import { useSidebar } from '../../contexts/SidebarContext';
+import TabsScroller from '../../components/TabsScroller';
 import '../../styles/AdminPanel.css';
 
 export default function Sources() {
@@ -15,14 +16,14 @@ export default function Sources() {
     return (
         <main className="main-content admin-panel-root">
             <div className="admin-tabs-container">
-                <div className="admin-tabs-slider">
+                <TabsScroller className="admin-tabs-slider">
                     <button className="mobile-menu-btn" onClick={toggleMobileMenu} aria-label={t.theme.toggleMenu}>
                         <span className="material-symbols-outlined">menu</span>
                     </button>
                     <div className="admin-title-section">
                         <span className="admin-title-text">{t.sourcesPage.title}</span>
                     </div>
-                </div>
+                </TabsScroller>
             </div>
 
             <div className="admin-tab-content">

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