fix: mobile notif panel shows X close button instead of Mark all read

Author: ddrayko

public/css/style.css

@@ -1343,12 +1343,22 @@ tbody tr:hover {
   flex-shrink: 0;
 }
 
+.notif-header-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
 .notif-panel-header h3 {
   font-size: 1.1rem;
   font-weight: 700;
   color: var(--text-primary);
 }
 
+.notif-close-mobile {
+  display: none;
+}
+
 .notif-mark-all {
   background: none;
   border: none;
@@ -1976,8 +1986,25 @@ tbody tr:hover {
   }
 
   .notif-mark-all {
-    font-size: 0.78rem;
-    padding: 6px 10px;
+    display: none;
+  }
+
+  .notif-close-mobile {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: none;
+    border: none;
+    color: var(--text-secondary);
+    cursor: pointer;
+    padding: 4px;
+    border-radius: var(--radius-sm);
+    transition: all var(--transition);
+  }
+
+  .notif-close-mobile:hover {
+    color: var(--text-primary);
+    background: var(--bg-3);
   }
 
   .notif-item {

public/js/app.js

@@ -1015,7 +1015,12 @@ async function renderDashboard() {
       <div class="notif-panel" id="notif-panel">
         <div class="notif-panel-header">
           <h3>Notifications</h3>
-          <button class="notif-mark-all" id="notif-mark-all">Mark all read</button>
+          <div class="notif-header-actions">
+            <button class="notif-mark-all" id="notif-mark-all">Mark all read</button>
+            <button class="notif-close-mobile" id="notif-close-mobile" aria-label="Close notifications">
+              <i data-lucide="x" style="width:20px;height:20px"></i>
+            </button>
+          </div>
         </div>
         <div class="notif-panel-list" id="notif-panel-list">
           <div class="notif-empty">No notifications yet</div>
@@ -1074,6 +1079,7 @@ async function renderDashboard() {
   });
 
   $('#notif-backdrop').addEventListener('click', closeNotifPanel);
+  $('#notif-close-mobile').addEventListener('click', closeNotifPanel);
 
   $('#notif-mark-all').addEventListener('click', markAllAsRead);