Improve tab scrolling with arrows

frontend/src/pages/Settings.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react';
 import { useTranslation } from '../contexts/LanguageContext';
 import { useSidebar } from '../contexts/SidebarContext';
+import TabsScroller from '../components/TabsScroller';
 import { sessionsAPI, twoFactorAPI } from '../api/client';
 import type { UserSession } from '../api/client';
 import '../styles/SettingsPage.css';
@@ -152,14 +153,14 @@ export default function Settings() {
     return (
         <main className="main-content settings-page-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 settings-tab-content">