feat(workbench): persist topbar notification state

web/src/assets/styles/components/top-bar.css

@@ -475,7 +475,9 @@
   top: calc(100% + 8px);
   right: 0;
   z-index: 60;
-  width: min(380px, calc(100vw - 32px));
+  width: clamp(340px, 34vw, 420px);
+  max-width: calc(100vw - 24px);
+  max-height: min(520px, calc(100vh - 96px));
   display: grid;
   grid-template-rows: auto auto minmax(0, 1fr);
   gap: 0;
@@ -509,6 +511,7 @@
 
 .notification-head-brand {
   min-width: 0;
+  flex: 1 1 auto;
   display: flex;
   align-items: center;
   gap: 10px;
@@ -658,7 +661,8 @@
 .notification-list {
   display: flex;
   flex-direction: column;
-  max-height: 280px;
+  min-height: 0;
+  max-height: min(336px, calc(100vh - 226px));
   overflow-x: hidden;
   overflow-y: auto;
   padding: 6px 0;
@@ -681,9 +685,9 @@
 
 .notification-row {
   display: grid;
-  grid-template-columns: 36px minmax(0, 1fr) 14px;
+  grid-template-columns: 34px minmax(0, 1fr) 16px;
   align-items: center;
-  gap: 10px;
+  gap: 9px;
   min-height: 0;
   padding: 10px 14px;
   border: 0;
@@ -714,8 +718,8 @@
 }
 
 .notification-type-icon {
-  width: 36px;
-  height: 36px;
+  width: 34px;
+  height: 34px;
   display: grid;
   place-items: center;
   border: 1px solid var(--theme-primary-light-6);
@@ -755,8 +759,7 @@
   gap: 4px;
 }
 
-.notification-copy strong,
-.notification-copy small {
+.notification-copy strong {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -793,9 +796,14 @@
 }
 
 .notification-copy small {
+  display: -webkit-box;
+  overflow: hidden;
   color: #475569;
   font-size: 12px;
   line-height: 1.4;
+  white-space: normal;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
 }
 
 .notification-meta {
@@ -808,10 +816,22 @@
 
 .notification-meta em,
 .notification-meta time {
+  min-width: 0;
+  overflow: hidden;
   color: #94a3b8;
   font-size: 11px;
   font-style: normal;
   font-weight: 600;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.notification-meta em {
+  flex: 1 1 auto;
+}
+
+.notification-meta time {
+  flex: 0 0 auto;
 }
 
 .notification-row-arrow {
@@ -1127,6 +1147,37 @@
     gap: 10px;
   }
 
+  .notification-popover {
+    position: fixed;
+    top: 72px;
+    right: 12px;
+    left: 12px;
+    width: auto;
+    max-width: none;
+    max-height: calc(100vh - 92px);
+  }
+
+  .notification-head {
+    align-items: flex-start;
+    padding: 11px 12px 9px;
+  }
+
+  .notification-head-actions {
+    gap: 2px;
+  }
+
+  .notification-clear-btn {
+    padding: 0 8px;
+  }
+
+  .notification-list {
+    max-height: calc(100vh - 218px);
+  }
+
+  .notification-row {
+    padding: 9px 12px;
+  }
+
   .company-switcher {
     flex: 1 1 auto;
     max-width: none;
@@ -1171,6 +1222,41 @@
 }
 
 @media (max-width: 420px) {
+  .notification-popover {
+    top: 64px;
+    right: 8px;
+    left: 8px;
+    max-height: calc(100vh - 78px);
+  }
+
+  .notification-head {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+  }
+
+  .notification-head-brand {
+    gap: 8px;
+  }
+
+  .notification-head-icon,
+  .notification-type-icon {
+    width: 30px;
+    height: 30px;
+  }
+
+  .notification-tabs {
+    padding: 0 10px;
+  }
+
+  .notification-row {
+    grid-template-columns: 30px minmax(0, 1fr);
+    gap: 8px;
+  }
+
+  .notification-row-arrow {
+    display: none;
+  }
+
   .topbar.detail-mode {
     gap: 6px;
     padding: 8px 12px;