Migrate Notifications interface patterns

webui/src/styles/notifications.css

@@ -15,6 +15,8 @@
 
 .notifications-widget-actions {
   display: flex;
+  align-items: center;
+  gap: 8px;
   justify-content: flex-end;
   margin-top: 14px;
 }
@@ -74,6 +76,11 @@
 .notifications-status-filter {
   width: calc(100% - 16px);
   margin: 8px;
+  overflow-x: auto;
+}
+
+.notifications-status-filter .segmented-control-option {
+  flex: 0 0 auto;
 }
 
 .notifications-list {
@@ -158,6 +165,10 @@
   margin: 8px 12px 0;
 }
 
+.notifications-workspace > .action-blocker-hint {
+  margin: 8px 12px 0;
+}
+
 .notifications-detail {
   min-height: 0;
   overflow: auto;
@@ -208,6 +219,16 @@
   align-items: start;
 }
 
+.notifications-settings-documentation,
+.notifications-settings-panel > .action-blocker-hint {
+  grid-column: 1 / -1;
+}
+
+.notifications-settings-documentation {
+  display: flex;
+  justify-content: flex-end;
+}
+
 .notifications-settings-inline-title {
   display: flex;
   align-items: center;
@@ -223,6 +244,17 @@
   font-size: 15px;
 }
 
+.notifications-section-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.notifications-section-heading h2 {
+  margin: 0;
+}
+
 .notifications-properties dl {
   display: grid;
   grid-template-columns: repeat(2, minmax(180px, 1fr));
@@ -285,6 +317,12 @@
   text-align: center;
 }
 
+.notifications-permission-state {
+  max-width: 860px;
+  margin: 0 auto;
+  padding: 32px 20px;
+}
+
 .notifications-empty-state h1 {
   margin: 0;
   color: var(--text-strong);