add scroll to TopBar buttons

src/renderer/components/TopBar.tsx

@@ -2,7 +2,7 @@ import { Box, Button, Tab, Tabs, Typography } from '@mui/material';
 import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
 import { useLocation, useNavigate } from 'react-router-dom';
 import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { Tooltip } from '@mui/material';
 import { fetchCoins } from '../api';
 import CustomTooltip from './CustomTooltip';
@@ -35,6 +35,7 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
   const [coins, setCoins] = useState<number>(0);
   const [value, setValue] = useState(0);
   const [activePage, setActivePage] = useState('versions');
+  const tabsWrapperRef = useRef<HTMLDivElement | null>(null);
 
   const handleChange = (event: React.SyntheticEvent, newValue: number) => {
     setValue(newValue);
@@ -53,6 +54,23 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
     navigate('/');
   };
 
+  const handleTabsWheel = (event: React.WheelEvent<HTMLDivElement>) => {
+    // чтобы страница не скроллилась вертикально
+    event.preventDefault();
+
+    if (!tabsWrapperRef.current) return;
+
+    // Находим внутренний скроллер MUI Tabs
+    const scroller = tabsWrapperRef.current.querySelector(
+      '.MuiTabs-scroller'
+    ) as HTMLDivElement | null;
+
+    if (!scroller) return;
+
+    // Прокручиваем горизонтально, используя вертикальный скролл мыши
+    scroller.scrollLeft += event.deltaY * 0.3;
+  };
+
   // const getPageTitle = () => {
   //   if (isLoginPage) {
   //     return 'Вход';
@@ -159,6 +177,8 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
         )}
         {!isLaunchPage && !isRegistrationPage && !isLoginPage && (
           <Box
+            ref={tabsWrapperRef}
+            onWheel={handleTabsWheel}
             sx={{
               borderBottom: 1,
               borderColor: 'transparent',
@@ -171,7 +191,10 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
               value={value}
               onChange={handleChange}
               aria-label="basic tabs example"
+              variant="scrollable"
+              scrollButtons={false}
               disableRipple={true}
+              sx={{ maxWidth: "42vw"}}
             >
               <Tab
                 label="Версии"