From 820b73e62250d57605760dd252eb664d65b490fa Mon Sep 17 00:00:00 2001
From: shats <admin@shts.su>
Date: Tue, 17 Feb 2026 15:08:50 +0700
Subject: [PATCH] feat(SettingsPage): enhance sidebar layout and content
 responsiveness for improved user experience

---
 frontend/src/App.css          | 10 ++++++++++
 frontend/src/SettingsPage.jsx | 32 ++++++++------------------------
 2 files changed, 18 insertions(+), 24 deletions(-)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index 805fdb4..19b13ea 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -346,6 +346,16 @@
   letter-spacing: 0.04em;
 }
 
+/* Страница настроек: сайдбар не растягивается слишком широко */
+.settings-page-sidebar {
+  max-width: 220px;
+}
+@media (min-width: 992px) {
+  .settings-page-sidebar {
+    max-width: 260px;
+  }
+}
+
 /* Responsive navbar */
 @media (max-width: 991.98px) {
   .navbar-collapse {
diff --git a/frontend/src/SettingsPage.jsx b/frontend/src/SettingsPage.jsx
index ec479f3..d59e8a4 100644
--- a/frontend/src/SettingsPage.jsx
+++ b/frontend/src/SettingsPage.jsx
@@ -279,7 +279,7 @@ export default function SettingsPage() {
             title="Настройки интерфейса"
             icon={<IconSettings size={28} />}
             pretitle="Интерфейс"
-            meta="WebSocket, DoH, пинг, PTR зона и другие параметры UI"
+            meta="WebSocket, DoH, пинг, PTR зона"
             actions={
               <div className="btn-list">
                 <button
@@ -321,12 +321,12 @@ export default function SettingsPage() {
             </div>
           )}
 
-          <div className="row">
-            {/* Боковое меню в стиле Tabler Settings (секции + list-group) */}
-            <div className="col-lg-3 col-xl-2 mb-4 mb-lg-0 pe-lg-0">
+          <div className="row g-0 g-lg-4">
+            {/* Боковое меню — узкая колонка, светлый фон */}
+            <div className="col-12 col-lg-3 col-xl-2 mb-4 mb-lg-0 settings-page-sidebar">
               <div
-                className="sticky-top border-end border-1 pe-lg-4 py-3"
-                style={{ top: '1rem' }}
+                className="sticky-top bg-body-tertiary rounded-end py-3 px-3 pe-lg-3"
+                style={{ top: '1rem', minHeight: '200px' }}
               >
                 <div className="input-icon mb-3">
                   <span className="input-icon-addon">
@@ -376,8 +376,8 @@ export default function SettingsPage() {
               </div>
             </div>
 
-            {/* Контент выбранного раздела */}
-            <div className="col-lg-9 col-xl-10">
+            {/* Контент выбранного раздела — на всю оставшуюся ширину */}
+            <div className="col-lg-9 col-xl-10 min-vw-0 pt-lg-0">
               {activeSection === 'live-doh' && (
               <SectionCard
                 id="live-doh"
@@ -585,22 +585,6 @@ export default function SettingsPage() {
               )}
             </div>
           </div>
-
-          {/* Кнопка сохранения внизу страницы (дублируем для удобства) */}
-          <div className="mt-3 pt-3 border-top">
-            <button
-              type="button"
-              className="btn btn-primary"
-              onClick={onSave}
-              disabled={saving}
-            >
-              {saving && (
-                <span className="spinner-border spinner-border-sm me-2" />
-              )}
-              <IconDeviceFloppy size={18} className="me-1" />
-              Сохранить настройки
-            </button>
-          </div>
         </div>
       </div>
     </div>