Improve tab scrolling with arrows

frontend/src/pages/Users.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useMemo, useState } from 'react';
 import type { FormEvent } from 'react';
 import Sidebar from '../components/Sidebar';
+import TabsScroller from '../components/TabsScroller';
 import { useAuth } from '../contexts/AuthContext';
 import { useTranslation } from '../contexts/LanguageContext';
 import { useSidebar } from '../contexts/SidebarContext';
@@ -181,7 +182,7 @@ export default function Users() {
       <Sidebar />
       <main className="main-content users-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>
@@ -192,7 +193,7 @@ export default function Users() {
               <span className="material-symbols-outlined">add</span>
               <span>{t.usersPage.addUser}</span>
             </button>
-          </div>
+          </TabsScroller>
         </div>
 
         <div className="page-content users-page">