fix(notifications): refine bell notification center

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

@@ -495,17 +495,80 @@
   font-weight: 650;
 }
 
-.notification-head button {
+.notification-head-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  flex: 0 0 auto;
+}
+
+.notification-clear-btn {
+  height: 26px;
+  padding: 0 9px;
+  border: 1px solid #dbe4ee;
+  border-radius: 4px;
+  background: #fff;
+  color: #475569;
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.notification-clear-btn:hover:not(:disabled) {
+  border-color: var(--theme-primary-light-5);
+  background: var(--theme-primary-light-9);
+  color: var(--theme-primary-active);
+}
+
+.notification-clear-btn:disabled {
+  color: #cbd5e1;
+  cursor: not-allowed;
+}
+
+.notification-close-btn {
+  position: relative;
   width: 26px;
   height: 26px;
-  display: grid;
+  display: inline-grid;
   place-items: center;
+  border: 1px solid transparent;
   border-radius: 4px;
   color: #64748b;
 }
 
-.notification-head button:hover {
-  background: #f1f5f9;
+.notification-close-btn span,
+.notification-close-btn span::before,
+.notification-close-btn span::after {
+  position: absolute;
+  display: block;
+}
+
+.notification-close-btn span {
+  inset: 0;
+}
+
+.notification-close-btn span::before,
+.notification-close-btn span::after {
+  content: "";
+  top: 50%;
+  left: 50%;
+  width: 12px;
+  height: 2px;
+  border-radius: 999px;
+  background: currentColor;
+  transform-origin: center;
+}
+
+.notification-close-btn span::before {
+  transform: translate(-50%, -50%) rotate(45deg);
+}
+
+.notification-close-btn span::after {
+  transform: translate(-50%, -50%) rotate(-45deg);
+}
+
+.notification-close-btn:hover {
+  border-color: #e2e8f0;
+  background: #f8fafc;
   color: #0f172a;
 }
 
@@ -561,8 +624,25 @@
   z-index: 1;
   display: grid;
   gap: 8px;
-  max-height: 320px;
-  overflow: auto;
+  max-height: 244px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding-right: 2px;
+  scrollbar-width: thin;
+  scrollbar-color: #cbd5e1 transparent;
+}
+
+.notification-list::-webkit-scrollbar {
+  width: 6px;
+}
+
+.notification-list::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.notification-list::-webkit-scrollbar-thumb {
+  border-radius: 999px;
+  background: #cbd5e1;
 }
 
 .notification-row {