feat(App): implement mobile sidebar overlay with backdrop and responsive adjustments; enhance layout for better usability on small screens

frontend/src/App.css

@@ -347,6 +347,52 @@
   padding-left: 0;
 }
 
+/* ===== Мобильный сайдбар: оверлей и бэкдроп (Tabler-style) ===== */
+.sidebar-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 1035;
+  background: rgba(0, 0, 0, 0.4);
+  transition: opacity 0.2s ease;
+}
+body.sidebar-overlay-open {
+  overflow: hidden;
+  touch-action: none;
+}
+
+@media (max-width: 767.98px) {
+  .page .navbar-vertical .navbar-collapse {
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: min(100vw, 280px);
+    max-width: 280px;
+    z-index: 1040;
+    background: #1e293b;
+    margin: 0;
+    padding: 1rem 0;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
+    flex-direction: column;
+  }
+  .page .navbar-vertical .navbar-collapse.show {
+    display: flex !important;
+  }
+  .page-wrapper {
+    margin-left: 0 !important;
+  }
+  .navbar-vertical .nav-link,
+  .navbar-vertical .dropdown-item {
+    min-height: 44px;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+    display: flex;
+    align-items: center;
+  }
+}
+
 /* Responsive navbar */
 @media (max-width: 991.98px) {
   .navbar-collapse {
@@ -461,7 +507,7 @@
 
 /* Responsive sizing for small screens */
 @media (max-width: 992px) {
-  .header-actions { gap: 0.4rem; }
+  .header-actions { gap: 0.4rem; flex-wrap: wrap; }
   .header-actions .btn {
     padding: 0.35rem 0.6rem;
     font-size: 0.875rem;
@@ -474,6 +520,30 @@
   .header-actions { width: 100%; }
 }
 
+/* Мобильные отступы контента */
+@media (max-width: 767.98px) {
+  .page-body .container-fluid,
+  .page-body .container-xl {
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+  .card .card-body {
+    padding: 0.75rem 1rem;
+  }
+  .offcanvas-start {
+    width: min(320px, 100vw) !important;
+    max-width: 100vw !important;
+  }
+  .modal-dialog {
+    margin: 0.5rem;
+    max-width: calc(100% - 1rem);
+  }
+  .modal-fullscreen-sm-down .modal-dialog {
+    max-width: 100%;
+    margin: 0;
+  }
+}
+
 /* Custom responsive adjustments */
 @media (max-width: 992px) {
   .page-wrapper {

frontend/src/App.jsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, createContext, useContext } from 'react';
+import { useState, useEffect, createContext, useContext, useRef } from 'react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import {
   BrowserRouter as Router,
@@ -142,16 +142,56 @@ function App() {
 const LAYOUT_FLUID = 'fluid';
 const LAYOUT_HORIZONTAL = 'horizontal';
 
+const SIDEBAR_COLLAPSE_ID = 'sidebar-menu';
+const MOBILE_BREAKPOINT = 768;
+
 function MainLayout() {
   const location = useLocation();
   const { lang, setLang, t } = useContext(LanguageContext);
   const { theme, setTheme } = useContext(ThemeContext);
   const [layout, setLayout] = useState(() => localStorage.getItem('layout') || LAYOUT_FLUID);
+  const [sidebarBackdrop, setSidebarBackdrop] = useState(false);
+  const sidebarTogglerRef = useRef(null);
 
   useEffect(() => {
     localStorage.setItem('layout', layout);
   }, [layout]);
 
+  // Мобильный сайдбар: бэкдроп при открытом меню и закрытие при навигации
+  useEffect(() => {
+    if (layout !== LAYOUT_FLUID) return;
+    const collapseEl = document.getElementById(SIDEBAR_COLLAPSE_ID);
+    const toggler = () => sidebarTogglerRef.current?.click?.();
+    const onShow = () => {
+      if (window.innerWidth < MOBILE_BREAKPOINT) {
+        setSidebarBackdrop(true);
+        document.body.classList.add('sidebar-overlay-open');
+      }
+    };
+    const onHide = () => {
+      setSidebarBackdrop(false);
+      document.body.classList.remove('sidebar-overlay-open');
+    };
+    if (collapseEl) {
+      collapseEl.addEventListener('show.bs.collapse', onShow);
+      collapseEl.addEventListener('hide.bs.collapse', onHide);
+      return () => {
+        collapseEl.removeEventListener('show.bs.collapse', onShow);
+        collapseEl.removeEventListener('hide.bs.collapse', onHide);
+      };
+    }
+  }, [layout]);
+
+  useEffect(() => {
+    if (layout !== LAYOUT_FLUID || window.innerWidth >= MOBILE_BREAKPOINT) return;
+    setSidebarBackdrop(false);
+    document.body.classList.remove('sidebar-overlay-open');
+    const collapseEl = document.getElementById(SIDEBAR_COLLAPSE_ID);
+    if (collapseEl?.classList.contains('show')) {
+      sidebarTogglerRef.current?.click?.();
+    }
+  }, [location.pathname, layout]);
+
   // Состояние для управления выпадающими меню
   const [dropdownStates, setDropdownStates] = useState({
     data: false,
@@ -445,18 +485,19 @@ function MainLayout() {
           </Link>
           <div className="navbar-nav flex-row d-md-none">
             <button
+              ref={sidebarTogglerRef}
               className="navbar-toggler"
               type="button"
               data-bs-toggle="collapse"
-              data-bs-target="#sidebar-menu"
-              aria-controls="sidebar-menu"
+              data-bs-target={`#${SIDEBAR_COLLAPSE_ID}`}
+              aria-controls={SIDEBAR_COLLAPSE_ID}
               aria-expanded="false"
               aria-label="Открыть меню"
             >
               <IconMenu2 />
             </button>
           </div>
-          <div className="collapse navbar-collapse" id="sidebar-menu">
+          <div className="collapse navbar-collapse" id={SIDEBAR_COLLAPSE_ID}>
             <ul className="navbar-nav pt-lg-3">
               {navCategories.map(category => (
                 <li key={category.id} className={`nav-item${category.items ? ' dropdown' : ''}${(category.single && activeTab === category.id) || (category.items && category.items.some(i => activeTab === i.id)) ? ' active' : ''}`}>
@@ -553,6 +594,15 @@ function MainLayout() {
         </div>
       </header>
 
+      {/* Бэкдроп мобильного меню: закрытие по клику */}
+      {sidebarBackdrop && (
+        <div
+          className="sidebar-backdrop d-md-none"
+          aria-hidden="true"
+          onClick={() => sidebarTogglerRef.current?.click?.()}
+        />
+      )}
+
       <div className="page-wrapper">
         <div className="page-body">
           <div className="container-fluid">

frontend/src/Dashboard.jsx

@@ -357,12 +357,12 @@ function Dashboard() {
         title="Панель"
         icon={<IconCloud size={24} />}
         actions={(
-          <div className="d-flex align-items-center gap-3">
+          <div className="header-actions d-flex align-items-center flex-wrap gap-2 gap-sm-3">
             {lastFetchTime && (
               <LastSaved timestamp={lastFetchTime} variant="compact" />
             )}
             <Tooltip content="Обновить данные" shortcut="⌘R">
-              <button className="btn btn-outline-primary" onClick={() => window.location.reload()}>
+              <button className="btn btn-outline-primary btn-sm" onClick={() => window.location.reload()}>
                 <IconRefresh className="me-2" /> Обновить
               </button>
             </Tooltip>
@@ -371,12 +371,12 @@ function Dashboard() {
       />
 
       {/* Пинг до сервисов (список из настроек / Пинг сервисов) */}
-      <div className="d-flex align-items-center justify-content-between mb-2">
+      <div className="d-flex flex-column flex-sm-row align-items-start align-items-sm-center justify-content-between gap-2 mb-2">
         <h3 className="mb-0">Пинг сервисов</h3>
         <Tooltip content="Принудительно обновить пинг (без учёта кэша), история и тренд накапливаются">
           <button
             type="button"
-            className="btn btn-outline-primary btn-sm"
+            className="btn btn-outline-primary btn-sm w-100 w-sm-auto"
             onClick={() => fetchPingServices(true)}
             disabled={pingLoading}
           >
@@ -389,7 +389,7 @@ function Dashboard() {
         {pingServicesConfig.map((config) => (
           <div
             key={config.id}
-            className={expandedPingId === config.id ? 'col-12' : 'col-6 col-md-3'}
+            className={expandedPingId === config.id ? 'col-12' : 'col-12 col-sm-6 col-md-3'}
           >
             <PingServiceCard
               config={config}
@@ -408,8 +408,8 @@ function Dashboard() {
       </div>
 
       {/* Основные метрики */}
-      <div className="row g-3 mb-4">
-        <div className="col-md-3">
+      <div className="row g-2 g-md-3 mb-4">
+        <div className="col-6 col-lg-3">
           <div className="animate-in">
             <StatCard
               icon={IconWorld}
@@ -423,7 +423,7 @@ function Dashboard() {
             />
           </div>
         </div>
-        <div className="col-md-3">
+        <div className="col-6 col-lg-3">
           <div className="animate-in" style={{animationDelay: '0.1s'}}>
             <StatCard
               icon={IconNetwork}
@@ -437,7 +437,7 @@ function Dashboard() {
             />
           </div>
         </div>
-        <div className="col-md-3">
+        <div className="col-6 col-lg-3">
           <div className="animate-in" style={{animationDelay: '0.2s'}}>
             <StatCard
               icon={IconNetwork}
@@ -451,7 +451,7 @@ function Dashboard() {
             />
           </div>
         </div>
-        <div className="col-md-3">
+        <div className="col-6 col-lg-3">
           <div className="animate-in" style={{animationDelay: '0.3s'}}>
             <StatCard
               icon={IconServer}
@@ -468,8 +468,8 @@ function Dashboard() {
       </div>
 
       {/* Дополнительные метрики */}
-      <div className="row g-3 mb-4 justify-content-center">
-        <div className="col-sm-6 col-md-3">
+      <div className="row g-2 g-md-3 mb-4 justify-content-center">
+        <div className="col-6 col-md-6 col-lg-3">
           <MetricCard
             title="Стран"
             value={loading ? '...' : stats.countriesCount ?? '—'}
@@ -478,7 +478,7 @@ function Dashboard() {
             description="Географическое покрытие"
           />
         </div>
-        <div className="col-sm-6 col-md-3">
+        <div className="col-6 col-md-6 col-lg-3">
           <MetricCard
             title="Провайдеров"
             value={loading ? '...' : stats.providersCount ?? '—'}
@@ -487,7 +487,7 @@ function Dashboard() {
             description="Облачные провайдеры"
           />
         </div>
-        <div className="col-sm-6 col-md-3">
+        <div className="col-6 col-md-6 col-lg-3">
           <MetricCard
             title="Онлайн серверов"
             value={loading ? '...' : `${stats.onlineServers ?? '—'}/${stats.totalServers ?? '—'}`}
@@ -496,7 +496,7 @@ function Dashboard() {
             description="Активные серверы"
           />
         </div>
-        <div className="col-sm-6 col-md-3">
+        <div className="col-6 col-md-6 col-lg-3">
           <MetricCard
             title="Последнее обновление"
             value={loading ? '...' : (stats.lastModified ? stats.lastModified : '—')}

frontend/src/DataManager.jsx

@@ -212,8 +212,8 @@ function DataManager({ entityName, entityKey, placeholder }) {
         </div>
       )}
 
-      <div className="row">
-        <div className="col-lg-4">
+      <div className="row g-2 g-lg-3">
+        <div className="col-12 col-lg-4">
           {/* Add New Item Card */}
           <div className="card card-md">
             <div className="card-header">
@@ -333,11 +333,11 @@ function DataManager({ entityName, entityKey, placeholder }) {
           </div>
         </div>
 
-        <div className="col-lg-8">
+        <div className="col-12 col-lg-8">
           <div className="card">
-            <div className="card-header d-flex justify-content-between align-items-center">
+            <div className="card-header d-flex flex-column flex-md-row justify-content-between align-items-stretch align-items-md-center gap-2">
               <h3 className="card-title mb-0">Список {entityName === 'домен' ? 'доменов' : entityName}</h3>
-              <div className="d-flex gap-2 w-50">
+              <div className="d-flex flex-wrap gap-2 flex-grow-1 flex-md-grow-0">
                 {/* Фильтр по шлюзу */}
                 <select className="form-select w-auto" value={filterType} onChange={e => { setFilterType(e.target.value); setCurrentPage(1); }}>
                   <option value="">Все шлюзы</option>

frontend/src/DomainsNewManager.jsx

@@ -950,10 +950,10 @@ function DomainsNewManager() {
               <button type="button" className="btn-close" onClick={() => setShowDiff(false)}></button>
               <div className="modal-header"><h3 className="modal-title">Изменения</h3></div>
               <div className="modal-body">
-                <div className="row g-3">
-                  <div className="col-md-4"><div className="card"><div className="card-body"><strong>Добавлено</strong><div className="text-muted">{diff.added.length}</div></div></div></div>
-                  <div className="col-md-4"><div className="card"><div className="card-body"><strong>Удалено</strong><div className="text-muted">{diff.removed.length}</div></div></div></div>
-                  <div className="col-md-4"><div className="card"><div className="card-body"><strong>Изменено</strong><div className="text-muted">{diff.changed.length}</div></div></div></div>
+                <div className="row g-2 g-md-3">
+                  <div className="col-6 col-md-4"><div className="card"><div className="card-body py-2"><strong>Добавлено</strong><div className="text-muted">{diff.added.length}</div></div></div></div>
+                  <div className="col-6 col-md-4"><div className="card"><div className="card-body py-2"><strong>Удалено</strong><div className="text-muted">{diff.removed.length}</div></div></div></div>
+                  <div className="col-6 col-md-4"><div className="card"><div className="card-body py-2"><strong>Изменено</strong><div className="text-muted">{diff.changed.length}</div></div></div></div>
                 </div>
               </div>
               <div className="modal-footer">

frontend/src/ServerManager.jsx

@@ -800,8 +800,8 @@ function ServerManager() {
             {/* Toolbar */}
             <div className="card mb-3">
               <div className="card-body py-2">
-                <div className="d-flex align-items-center justify-content-between">
-                  <div className="d-flex align-items-center gap-2">
+                <div className="d-flex flex-column flex-sm-row flex-wrap align-items-stretch align-items-sm-center justify-content-between gap-2">
+                  <div className="d-flex flex-wrap align-items-center gap-2">
                     {/* Открыть фильтры (offcanvas) */}
                     <button
                       type="button"
@@ -1087,22 +1087,22 @@ function ServerManager() {
               <h3 className="card-title mb-0">Добавить связь между серверами</h3>
             </div>
             <div className="card-body">
-              <div className="row g-3">
-                <div className="col-md-6">
+              <div className="row g-2 g-md-3">
+                <div className="col-12 col-md-6">
                   <label className="form-label">Сервер A</label>
                   <select className="form-select" value={newConnection.from} onChange={e => setNewConnection({ ...newConnection, from: e.target.value })}>
                     <option value="">Выберите сервер</option>
                     {servers.map(s => <option key={s.ip} value={s.ip}>{s.ip} ({s.dns})</option>)}
                   </select>
                 </div>
-                <div className="col-md-6">
+                <div className="col-12 col-md-6">
                   <label className="form-label">Сервер B</label>
                   <select className="form-select" value={newConnection.to} onChange={e => setNewConnection({ ...newConnection, to: e.target.value })}>
                     <option value="">Выберите сервер</option>
                     {servers.map(s => <option key={s.ip} value={s.ip}>{s.ip} ({s.dns})</option>)}
                   </select>
                 </div>
-                <div className="col-md-4">
+                <div className="col-12 col-md-4">
                   <label className="form-label">Тип туннеля</label>
                   <select className="form-select" value={newConnection.tunnelType} onChange={e => setNewConnection({ ...newConnection, tunnelType: e.target.value })}>
                     <option value="GRE">GRE</option>
@@ -1111,11 +1111,11 @@ function ServerManager() {
                     <option value="OpenVPN">OpenVPN</option>
                   </select>
                 </div>
-                <div className="col-md-4">
+                <div className="col-12 col-md-4">
                   <label className="form-label">IP туннеля A</label>
                   <input className="form-control" value={newConnection.ipA} onChange={e => setNewConnection({ ...newConnection, ipA: e.target.value })} placeholder="10.10.100.1" />
                 </div>
-                <div className="col-md-4">
+                <div className="col-12 col-md-4">
                   <label className="form-label">IP туннеля B</label>
                   <input className="form-control" value={newConnection.ipB} onChange={e => setNewConnection({ ...newConnection, ipB: e.target.value })} placeholder="10.10.100.2" />
                 </div>
@@ -1255,8 +1255,8 @@ function ServerManager() {
             <span className="badge bg-blue-lt text-blue">{newConnection.to || 'B'}</span>
           </div>
         </div>
-        <div className="row g-3">
-          <div className="col-md-4">
+        <div className="row g-2 g-md-3">
+          <div className="col-12 col-md-4">
             <FormField
               label="Туннель"
               name="tunnelType"
@@ -1272,7 +1272,7 @@ function ServerManager() {
               ]}
             />
           </div>
-          <div className="col-md-4">
+          <div className="col-12 col-md-4">
             <FormField
               label="IP сервера A"
               name="ipA"
@@ -1282,7 +1282,7 @@ function ServerManager() {
               required
             />
           </div>
-          <div className="col-md-4">
+          <div className="col-12 col-md-4">
             <FormField
               label="IP сервера B"
               name="ipB"

frontend/src/SettingsPage.jsx

@@ -577,7 +577,7 @@ export default function SettingsPage() {
               <>
                 <SectionHeading title="Сеть и AS" icon={IconNetwork} />
                 <div className="row g-2">
-                  <div className="col-md-6">
+                  <div className="col-12 col-md-6">
                     <FormField
                       label="Базовая AS"
                       name="baseAS"
@@ -597,7 +597,7 @@ export default function SettingsPage() {
               <>
                 <SectionHeading title="Пинг через MikroTik" icon={IconCloud} />
                 <div className="row g-2">
-                  <div className="col-md-6">
+                  <div className="col-12 col-md-6">
                     <FormField
                       label="Домен для пинга"
                       name="pingDomain"
@@ -609,7 +609,7 @@ export default function SettingsPage() {
                       disabled={saving}
                     />
                   </div>
-                  <div className="col-md-6">
+                  <div className="col-12 col-md-6">
                     <FormField
                       label="Срок кеша пинга (мин)"
                       name="pingCacheMinutes"
@@ -622,7 +622,7 @@ export default function SettingsPage() {
                       min={0}
                     />
                   </div>
-                  <div className="col-md-6">
+                  <div className="col-12 col-md-6">
                     <FormField
                       label="Кеш пингов на карте сети (сек)"
                       name="networkMapPingCacheSeconds"
@@ -638,7 +638,7 @@ export default function SettingsPage() {
                   <div className="col-12 mt-3">
                     <h4 className="subheader">Измерение скорости (интерфейсы)</h4>
                   </div>
-                  <div className="col-md-4">
+                  <div className="col-12 col-md-4">
                     <label className="form-label">Протокол измерения</label>
                     <select
                       className="form-select"
@@ -656,7 +656,7 @@ export default function SettingsPage() {
                       умолчанию для инструментов RouterOS.
                     </div>
                   </div>
-                  <div className="col-md-4">
+                  <div className="col-12 col-md-4">
                     <FormField
                       label="Время замера (сек)"
                       name="interfaceSpeedTestDurationSeconds"
@@ -670,7 +670,7 @@ export default function SettingsPage() {
                       max={600}
                     />
                   </div>
-                  <div className="col-md-4">
+                  <div className="col-12 col-md-4">
                     <FormField
                       label="Кеш результата замера (мин)"
                       name="interfaceSpeedTestCacheMinutes"
@@ -750,7 +750,7 @@ export default function SettingsPage() {
                 </div>
                 {pingServicesSource === 'router' && (
                   <div className="row g-2">
-                    <div className="col-md-6">
+                    <div className="col-12 col-md-6">
                       <label className="form-label">Домашний роутер</label>
                       <div className={saving ? 'opacity-75 pe-none' : ''}>
                         <ServerAutocompleteInput
@@ -769,7 +769,7 @@ export default function SettingsPage() {
                         первый jumphost.
                       </div>
                     </div>
-                    <div className="col-md-6">
+                    <div className="col-12 col-md-6">
                       <FormField
                         label="IP шлюза (не обязательно)"
                         name="pingServicesGatewayIp"
@@ -793,7 +793,7 @@ export default function SettingsPage() {
                   Настройки страницы «Uptime Monitor»: интервал проверки доступности Jumphost/Home и способ проверки.
                 </p>
                 <div className="row g-2">
-                  <div className="col-md-6">
+                  <div className="col-12 col-md-6">
                     <FormField
                       label="Интервал проверки (сек)"
                       name="uptimeMonitorIntervalSeconds"
@@ -807,7 +807,7 @@ export default function SettingsPage() {
                       max={86400}
                     />
                   </div>
-                  <div className="col-md-6">
+                  <div className="col-12 col-md-6">
                     <label className="form-label">Тип проверки</label>
                     <select
                       className="form-select"
@@ -823,7 +823,7 @@ export default function SettingsPage() {
                       HTTP: подключение к RouterOS API. Внутренний: пинг через туннель (как на карте сети). Внешний: пинг внешнего IP с другого jumphost.
                     </div>
                   </div>
-                  <div className="col-md-6">
+                  <div className="col-12 col-md-6">
                     <FormField
                       label="Кеш результатов (сек)"
                       name="uptimeMonitorCacheSeconds"
@@ -872,7 +872,7 @@ export default function SettingsPage() {
               <>
                 <SectionHeading title="Настройка PTR зоны" icon={IconWorld} />
                 <div className="row g-2">
-                  <div className="col-md-6">
+                  <div className="col-12 col-md-6">
                     <FormField
                       label="Заменить в DNS домене"
                       name="ptrZoneReplaceFrom"
@@ -884,7 +884,7 @@ export default function SettingsPage() {
                       disabled={saving}
                     />
                   </div>
-                  <div className="col-md-6">
+                  <div className="col-12 col-md-6">
                     <FormField
                       label="Заменить на"
                       name="ptrZoneReplaceTo"

frontend/src/components/CommunityStats.jsx

@@ -100,8 +100,8 @@ function CommunityStats({ communities = [] }) {
         ) : (
           <>
             {/* Общая статистика */}
-            <div className="row mb-4">
-              <div className="col-md-4">
+            <div className="row g-2 g-md-3 mb-4">
+              <div className="col-6 col-md-4">
                 <div className="card card-sm bg-blue-lt">
                   <div className="card-body">
                     <div className="h1 mb-0">{stats.length}</div>
@@ -109,7 +109,7 @@ function CommunityStats({ communities = [] }) {
                   </div>
                 </div>
               </div>
-              <div className="col-md-4">
+              <div className="col-6 col-md-4">
                 <div className="card card-sm bg-green-lt">
                   <div className="card-body">
                     <div className="h1 mb-0">{totalUsage}</div>
@@ -117,7 +117,7 @@ function CommunityStats({ communities = [] }) {
                   </div>
                 </div>
               </div>
-              <div className="col-md-4">
+              <div className="col-6 col-md-4">
                 <div className="card card-sm bg-purple-lt">
                   <div className="card-body">
                     <div className="h1 mb-0">{Object.keys(statsByCategory).length}</div>
@@ -198,12 +198,12 @@ function CommunityStats({ communities = [] }) {
             {Object.keys(statsByCategory).length > 1 && (
               <div>
                 <h4 className="mb-3">По категориям</h4>
-                <div className="row g-3">
+                <div className="row g-2 g-md-3">
                   {Object.entries(statsByCategory).map(([category, items]) => {
                     const categoryTotal = items.reduce((sum, item) => sum + item.count, 0);
                     const categoryPercentage = ((categoryTotal / totalUsage) * 100).toFixed(1);
                     return (
-                      <div key={category} className="col-md-6">
+                      <div key={category} className="col-12 col-md-6">
                         <div className="card card-sm">
                           <div className="card-body">
                             <div className="d-flex justify-content-between align-items-start mb-2">

frontend/src/components/ImportModal.jsx

@@ -178,7 +178,7 @@ function ImportModal({
 
             {/* Stats */}
             <div className="row g-2">
-              <div className="col-md-6">
+              <div className="col-12 col-md-6">
                 <div className="card bg-green-lt">
                   <div className="card-body py-2">
                     <div className="d-flex align-items-center">
@@ -191,7 +191,7 @@ function ImportModal({
                   </div>
                 </div>
               </div>
-              <div className="col-md-6">
+              <div className="col-12 col-md-6">
                 <div className="card bg-red-lt">
                   <div className="card-body py-2">
                     <div className="d-flex align-items-center">

frontend/src/components/PageHeader.jsx

@@ -29,7 +29,7 @@ function PageHeader({ title, icon, pretitle, actions, meta }) {
       </div>
       {actions && (
         <div className="row mt-2">
-          <div className="col d-print-none">
+          <div className="col d-print-none overflow-auto">
             {actions}
           </div>
         </div>

frontend/src/components/QuickAddBar.jsx

@@ -59,7 +59,7 @@ function QuickAddBar({
           value={value}
           onChange={(e) => setValue(e.target.value)}
         />
-        <div className="row g-3 mt-2">
+        <div className="row g-2 g-md-3 mt-2">
           <div className="col">
             <div className="card"><div className="card-body p-2">
               <div className="text-muted">Готово</div>

frontend/src/components/TopNStats.jsx

@@ -58,9 +58,9 @@ function TopNStats({ data, loading }) {
   };
 
   return (
-    <div className="row g-3">
+    <div className="row g-2 g-md-3">
       {/* Top Страны */}
-      <div className="col-md-6">
+      <div className="col-12 col-md-6">
         <div className="card h-100">
           <div className="card-header">
             <h3 className="card-title">
@@ -107,7 +107,7 @@ function TopNStats({ data, loading }) {
       </div>
 
       {/* Top Провайдеры */}
-      <div className="col-md-6">
+      <div className="col-12 col-md-6">
         <div className="card h-100">
           <div className="card-header">
             <h3 className="card-title">

frontend/src/components/server/LinkGeneratorModal.jsx

@@ -55,8 +55,8 @@ function LinkGeneratorModal({ show, server, urlSettings, onUrlSettingsChange, on
             <button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
           </div>
           <div className="modal-body">
-            <div className="row">
-              <div className="col-md-6">
+            <div className="row g-2">
+              <div className="col-12 col-md-6">
                 <h6 className="mb-3">Настройки URL</h6>
                 <div className="mb-3">
                   <label className="form-label">Базовый URL</label>
@@ -99,7 +99,7 @@ function LinkGeneratorModal({ show, server, urlSettings, onUrlSettingsChange, on
                   />
                 </div>
               </div>
-              <div className="col-md-6">
+              <div className="col-12 col-md-6">
                 <div className="mb-3">
                   <label className="form-label">Telegram Gateway</label>
                   <input

frontend/src/index.css

@@ -166,20 +166,29 @@ button:focus-visible,
   transform: scale(1.05);
 }
 
-/* Minimum touch target size for mobile */
+/* Minimum touch target size for mobile (Tabler / a11y) */
 @media (max-width: 768px) {
-  .btn, .page-link, .dropdown-item {
+  .btn:not(.btn-icon), .page-link, .dropdown-item {
     min-height: 44px;
-    min-width: 44px;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
     display: inline-flex;
     align-items: center;
     justify-content: center;
   }
   
   .btn-icon {
+    min-width: 44px;
+    min-height: 44px;
     width: 44px;
     height: 44px;
   }
+  
+  .navbar-toggler {
+    min-width: 44px;
+    min-height: 44px;
+    padding: 0.5rem;
+  }
 }
 
 /* Enhanced table row interactions */
@@ -429,21 +438,57 @@ button:focus-visible,
 }
 
 /* ===== Responsive Improvements ===== */
+@media (min-width: 576px) {
+  .w-sm-auto { width: auto !important; }
+}
 @media (max-width: 768px) {
-  .card-sm .avatar {
+  .card-sm .avatar,
+  .card .avatar.avatar-lg {
     width: 2.5rem;
     height: 2.5rem;
   }
   
-  .card-sm .h2 {
+  .card-sm .h2,
+  .card .h3.mb-0 {
     font-size: 1.25rem;
   }
   
   .table-responsive {
     font-size: 0.875rem;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+  .table-responsive .table {
+    margin-bottom: 0;
+  }
+  .table-responsive .table th,
+  .table-responsive .table td {
+    white-space: nowrap;
   }
   
   .btn-group {
     flex-wrap: wrap;
   }
+  
+  .page-title {
+    font-size: 1.35rem;
+  }
+  
+  .page-header .header-actions {
+    width: 100%;
+  }
+  
+  /* Карточки и ряды: компактные отступы на мобильных */
+  .row.g-3 { --bs-gutter-x: 0.5rem; --bs-gutter-y: 0.5rem; }
+  .card-title { font-size: 1rem; }
+  .card-header { padding: 0.5rem 0.75rem; }
+}
+
+/* Универсальные мобильные колонки: явный full-width ниже md */
+@media (max-width: 767.98px) {
+  .row .col-md-4:not([class*="col-12"]):not([class*="col-sm"]),
+  .row .col-md-6:not([class*="col-12"]):not([class*="col-sm"]) {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
 }