Improve tab scrolling with arrows

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>
   );
 }
-