From 574c0d25c25dfa2b5133a15aa8aeedae12d08379 Mon Sep 17 00:00:00 2001
From: shats <admin@shts.su>
Date: Tue, 24 Feb 2026 01:32:22 +0700
Subject: [PATCH] feat(alerts): add dropup functionality to AlertsBell
 component and improve dropdown styling for better user experience

---
 frontend/src/App.css                   | 14 ++++++++++++
 frontend/src/App.jsx                   |  2 +-
 frontend/src/components/AlertsBell.jsx | 30 ++++++++++++++------------
 3 files changed, 31 insertions(+), 15 deletions(-)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index 7daf2eb..00ffe90 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -92,6 +92,20 @@
 .navbar-vertical .navbar-sidebar-footer .dropdown-toggle::after {
   display: none;
 }
+/* Панель оповещений в футере: без горизонтального скролла, футер карточки в одну линию */
+.navbar-vertical .navbar-sidebar-footer .dropdown-menu-card {
+  overflow-x: hidden;
+  box-sizing: border-box;
+}
+.navbar-vertical .navbar-sidebar-footer .dropdown-menu-card .card-footer {
+  flex-wrap: nowrap;
+  min-width: 0;
+}
+.navbar-vertical .navbar-sidebar-footer .dropdown-menu-card .card-footer .btn {
+  flex: 1 1 auto;
+  min-width: 0;
+  justify-content: center;
+}
 /* Стрелка только у пунктов с подменю (dropdown-toggle), не у обычных ссылок и не у бренда */
 .navbar-vertical .nav-link:not(.dropdown-toggle)::after {
   display: none !important;
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 5065949..b0260be 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -588,7 +588,7 @@ function MainLayout() {
                   </div>
                 </div>
                 <div className="nav-item">
-                  <AlertsBell />
+                  <AlertsBell dropup />
                 </div>
                 <div className="nav-item">
                   <KeyboardShortcutsButton className="nav-link btn-icon rounded" title="Горячие клавиши" />
diff --git a/frontend/src/components/AlertsBell.jsx b/frontend/src/components/AlertsBell.jsx
index fa4342a..52dc993 100644
--- a/frontend/src/components/AlertsBell.jsx
+++ b/frontend/src/components/AlertsBell.jsx
@@ -21,28 +21,30 @@ function AlertIcon({ type, severity }) {
   return <Icon size={18} className={colorClass} />;
 }
 
-export default function AlertsBell() {
+export default function AlertsBell({ dropup = false }) {
   const { alerts, total, loading, refresh } = useAlerts();
 
   return (
-    <div className="nav-item dropdown">
+    <div className={`nav-item dropdown${dropup ? ' dropup' : ''}`}>
       <a
         href="#"
-        className="nav-link px-2 dropdown-toggle position-relative"
+        className="nav-link px-2 dropdown-toggle position-relative d-inline-flex align-items-center justify-content-center"
         data-bs-toggle="dropdown"
         onClick={(e) => e.preventDefault()}
         aria-label={`Оповещения: ${total} активных`}
         title="Оповещения о проблемах"
       >
-        <IconBell size={20} />
-        {total > 0 && (
-          <span className="badge badge-sm bg-danger position-absolute top-0 end-0 translate-middle rounded-pill">
-            {total > 99 ? '99+' : total}
-          </span>
-        )}
+        <span className="position-relative d-inline-flex">
+          <IconBell size={20} />
+          {total > 0 && (
+            <span className="badge badge-sm bg-danger position-absolute top-0 end-0 translate-middle rounded-pill" style={{ top: '-2px', right: '-2px' }}>
+              {total > 99 ? '99+' : total}
+            </span>
+          )}
+        </span>
       </a>
-      <div className="dropdown-menu dropdown-menu-end dropdown-menu-card" style={{ width: '320px', maxWidth: '95vw' }}>
-        <div className="card-header d-flex align-items-center justify-content-between py-2">
+      <div className="dropdown-menu dropdown-menu-end dropdown-menu-card overflow-hidden" style={{ width: '320px', maxWidth: '95vw' }}>
+        <div className="card-header d-flex align-items-center justify-content-between py-2 px-3">
           <span className="fw-semibold">Оповещения</span>
           <button
             type="button"
@@ -85,11 +87,11 @@ export default function AlertsBell() {
             </div>
           )}
         </div>
-        <div className="card-footer py-2 d-flex gap-2">
-          <Link to="/settings#alerts" className="btn btn-sm btn-ghost-secondary flex-grow-1">
+        <div className="card-footer py-2 px-3 d-flex align-items-center gap-2 flex-nowrap">
+          <Link to="/settings#alerts" className="btn btn-sm btn-ghost-secondary text-nowrap">
             Настройки
           </Link>
-          <Link to="/dashboard" className="btn btn-sm btn-outline-primary flex-grow-1">
+          <Link to="/dashboard" className="btn btn-sm btn-outline-primary text-nowrap">
             Панель
           </Link>
         </div>