@echothink-ui/activity 0.1.0

package/src/styles.css

@@ -0,0 +1,854 @@
+@import "@echothink-ui/core/styles.css";
+
+.eth-activity-system-status-banner {
+  --eth-alert-accent: var(--eth-color-info);
+  --eth-alert-background: color-mix(
+    in srgb,
+    var(--eth-alert-accent) 8%,
+    var(--eth-color-layer-01)
+  );
+  --eth-alert-border: var(--eth-color-border-subtle);
+
+  box-shadow: inset 3px 0 0 var(--eth-alert-accent);
+  min-block-size: 3rem;
+}
+
+.eth-activity-system-status-banner.eth-activity-alert-banner--warning {
+  --eth-alert-accent: var(--eth-color-warning);
+  --eth-alert-background: color-mix(
+    in srgb,
+    var(--eth-color-warning) 16%,
+    var(--eth-color-layer-01)
+  );
+}
+
+.eth-activity-system-status-banner.eth-activity-alert-banner--danger {
+  --eth-alert-accent: var(--eth-color-danger);
+  --eth-alert-background: color-mix(
+    in srgb,
+    var(--eth-color-danger) 7%,
+    var(--eth-color-layer-01)
+  );
+}
+
+.eth-activity-system-status-banner .eth-inline-notification.cds--inline-notification {
+  min-block-size: 3rem;
+}
+
+.eth-activity-system-status-banner .cds--inline-notification__text-wrapper {
+  align-items: baseline;
+  column-gap: var(--eth-space-sm);
+  display: flex;
+  flex-wrap: wrap;
+  min-inline-size: 0;
+}
+
+.eth-activity-system-status-banner .cds--inline-notification__subtitle {
+  color: var(--eth-color-text-secondary);
+}
+
+.eth-activity-notification-item,
+.eth-activity-notification-center {
+  --eth-activity-notification-layer: var(--eth-color-layer-01);
+  --eth-activity-notification-layer-hover: var(--eth-color-layer-hover);
+  --eth-activity-notification-border: var(--eth-color-border-subtle);
+  --eth-activity-notification-focus: var(--eth-color-focus);
+  --eth-activity-notification-text-primary: var(--eth-color-text-primary);
+  --eth-activity-notification-text-secondary: var(--eth-color-text-secondary);
+}
+
+.eth-activity-notification-center {
+  inline-size: min(100%, 42rem);
+  min-inline-size: 0;
+}
+
+.eth-activity-notification-center.eth-surface {
+  gap: var(--eth-space-lg);
+}
+
+.eth-activity-notification-center .eth-surface__header {
+  border-block-end: 1px solid var(--eth-color-border-subtle);
+  padding-block-end: var(--eth-space-lg);
+}
+
+.eth-activity-notification-center .eth-surface__subtitle {
+  font-size: calc(0.875rem * var(--eth-text-scale, 1));
+  line-height: 1.4286;
+  margin-block-start: var(--eth-space-xs);
+}
+
+.eth-activity-notification-center__toolbar {
+  align-items: center;
+  display: flex;
+  justify-content: flex-end;
+  min-inline-size: 0;
+}
+
+.eth-activity-notification-center__groups,
+.eth-activity-notification-center__group,
+.eth-activity-notification-center__items {
+  display: grid;
+  min-inline-size: 0;
+}
+
+.eth-activity-notification-center__groups {
+  gap: var(--eth-space-xl);
+}
+
+.eth-activity-notification-center__group {
+  gap: var(--eth-space-sm);
+}
+
+.eth-activity-notification-center__group h3 {
+  color: var(--eth-color-text-secondary);
+  font-size: calc(0.75rem * var(--eth-text-scale, 1));
+  font-weight: 600;
+  line-height: 1.3333;
+  margin: 0;
+  text-transform: uppercase;
+}
+
+.eth-activity-notification-center__items {
+  border-block-start: 1px solid var(--eth-color-border-subtle);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.eth-activity-notification-center__row {
+  align-items: start;
+  border-block-end: 1px solid var(--eth-color-border-subtle);
+  display: grid;
+  gap: var(--eth-space-sm);
+  grid-template-columns: minmax(0, 1fr) max-content;
+  min-inline-size: 0;
+  padding-block: var(--eth-space-sm);
+}
+
+.eth-activity-notification-center__row > .eth-button {
+  justify-self: end;
+  margin-block-start: var(--eth-space-sm);
+}
+
+.eth-activity-notification-center__empty {
+  background: var(--eth-color-layer-02);
+  border: 1px dashed var(--eth-color-border-subtle);
+  color: var(--eth-color-text-secondary);
+  font-size: calc(0.875rem * var(--eth-text-scale, 1));
+  line-height: 1.4286;
+  margin: 0;
+  padding: var(--eth-space-lg);
+}
+
+.eth-activity-notification-item {
+  --eth-activity-notification-accent: var(--eth-color-info);
+
+  align-items: stretch;
+  background: var(--eth-activity-notification-layer);
+  border: 1px solid var(--eth-activity-notification-border);
+  border-inline-start: 3px solid var(--eth-activity-notification-accent);
+  color: var(--eth-activity-notification-text-primary);
+  display: grid;
+  inline-size: 100%;
+  max-inline-size: 100%;
+  min-inline-size: 0;
+}
+
+.eth-activity-notification-item[data-severity="warning"] {
+  --eth-activity-notification-accent: var(--eth-color-warning);
+}
+
+.eth-activity-notification-item[data-severity="danger"],
+.eth-activity-notification-item[data-severity="error"] {
+  --eth-activity-notification-accent: var(--eth-color-danger);
+}
+
+.eth-activity-notification-item[data-severity="success"] {
+  --eth-activity-notification-accent: var(--eth-color-success);
+}
+
+.eth-activity-notification-item--read {
+  --eth-activity-notification-accent: var(--eth-activity-notification-border);
+
+  background: var(--eth-color-layer-02);
+}
+
+.eth-activity-notification-item__main {
+  align-items: start;
+  background: transparent;
+  border: 0;
+  color: inherit;
+  display: grid;
+  gap: var(--eth-space-md);
+  grid-template-columns: max-content minmax(0, 1fr) max-content;
+  inline-size: 100%;
+  min-block-size: 3.5rem;
+  min-inline-size: 0;
+  padding: var(--eth-space-md);
+  text-align: start;
+}
+
+button.eth-activity-notification-item__main {
+  cursor: pointer;
+  font: inherit;
+  transition: background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
+}
+
+button.eth-activity-notification-item__main:hover {
+  background: var(--eth-activity-notification-layer-hover);
+}
+
+button.eth-activity-notification-item__main:focus-visible,
+.eth-activity-notification-item__actions :where(button, a):focus-visible {
+  outline: 2px solid var(--eth-activity-notification-focus);
+  outline-offset: -2px;
+}
+
+.eth-activity-notification-item__severity {
+  justify-self: start;
+}
+
+.eth-activity-notification-item__content {
+  display: grid;
+  gap: var(--eth-space-xs);
+  min-inline-size: 0;
+}
+
+.eth-activity-notification-item__title,
+.eth-activity-notification-item__body {
+  font-size: calc(0.875rem * var(--eth-text-scale, 1));
+  line-height: 1.4286;
+  min-inline-size: 0;
+  overflow-wrap: anywhere;
+}
+
+.eth-activity-notification-item__title {
+  color: var(--eth-activity-notification-text-primary);
+  font-weight: 600;
+}
+
+.eth-activity-notification-item--read .eth-activity-notification-item__title {
+  font-weight: 400;
+}
+
+.eth-activity-notification-item__body {
+  color: var(--eth-activity-notification-text-secondary);
+}
+
+.eth-activity-notification-item__time {
+  color: var(--eth-activity-notification-text-secondary);
+  font-family: var(--eth-font-mono, "IBM Plex Mono", monospace);
+  font-size: calc(0.75rem * var(--eth-text-scale, 1));
+  font-variant-numeric: tabular-nums;
+  justify-self: end;
+  line-height: 1.3333;
+  white-space: nowrap;
+}
+
+.eth-activity-notification-item--read .eth-activity-notification-item__title,
+.eth-activity-notification-item--read .eth-activity-notification-item__body,
+.eth-activity-notification-item--read .eth-activity-notification-item__time {
+  color: var(--eth-color-text-secondary);
+}
+
+.eth-activity-notification-item__actions {
+  align-items: center;
+  border-block-start: 1px solid var(--eth-color-border-subtle);
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--eth-space-sm);
+  justify-content: flex-start;
+  min-inline-size: 0;
+  padding: var(--eth-space-sm) var(--eth-space-md);
+}
+
+.eth-activity-notification-item__actions .eth-actions {
+  gap: var(--eth-space-sm);
+}
+
+.eth-activity-notification-item__actions .eth-button {
+  margin: 0;
+}
+
+.eth-activity-notification-center__row .eth-activity-notification-item {
+  inline-size: 100%;
+}
+
+.eth-activity-subscription-preferences {
+  align-content: start;
+  background: var(--eth-color-layer-01);
+  border: 1px solid var(--eth-color-border-subtle);
+  border-radius: 0;
+  color: var(--eth-color-text-primary);
+  display: grid;
+  gap: 0;
+  inline-size: min(100%, 48rem);
+  min-inline-size: 0;
+  padding: 0;
+}
+
+.eth-activity-subscription-preferences > .eth-surface__header {
+  background: var(--eth-color-layer-02);
+  border-block-end: 1px solid var(--eth-color-border-subtle);
+  padding: var(--eth-space-xl);
+}
+
+.eth-activity-subscription-preferences .eth-surface__heading h2 {
+  color: var(--eth-color-text-primary);
+  font-size: calc(1rem * var(--eth-text-scale, 1));
+  font-weight: 600;
+  line-height: 1.375;
+  margin: 0;
+}
+
+.eth-activity-subscription-preferences .eth-surface__description {
+  color: var(--eth-color-text-secondary);
+  font-size: calc(0.875rem * var(--eth-text-scale, 1));
+  line-height: 1.4286;
+  max-inline-size: 38rem;
+}
+
+.eth-activity-subscription-preferences__categories {
+  display: grid;
+  min-inline-size: 0;
+}
+
+.eth-activity-subscription-preferences__category {
+  align-items: start;
+  border-block-end: 1px solid var(--eth-color-border-subtle);
+  column-gap: var(--eth-space-2xl);
+  display: grid;
+  grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr);
+  margin: 0;
+  min-inline-size: 0;
+  padding: var(--eth-space-lg) var(--eth-space-xl);
+  row-gap: var(--eth-space-lg);
+}
+
+.eth-activity-subscription-preferences__category:last-child {
+  border-block-end: 0;
+}
+
+.eth-activity-subscription-preferences__category-header {
+  display: grid;
+  gap: var(--eth-space-xs);
+  min-inline-size: 0;
+}
+
+.eth-activity-subscription-preferences__category h3 {
+  color: var(--eth-color-text-primary);
+  font-size: calc(0.875rem * var(--eth-text-scale, 1));
+  font-weight: 600;
+  line-height: 1.2857;
+  margin: 0;
+  overflow-wrap: anywhere;
+}
+
+.eth-activity-subscription-preferences__category-description,
+.eth-activity-subscription-preferences__channel-description,
+.eth-activity-subscription-preferences__channel-empty,
+.eth-activity-subscription-preferences__empty {
+  color: var(--eth-color-text-secondary);
+  font-size: calc(0.875rem * var(--eth-text-scale, 1));
+  line-height: 1.4286;
+  margin: 0;
+}
+
+.eth-activity-subscription-preferences__channels {
+  border: 1px solid var(--eth-color-border-subtle);
+  display: grid;
+  min-inline-size: 0;
+}
+
+.eth-activity-subscription-preferences__channel {
+  align-items: center;
+  background: var(--eth-color-layer-01);
+  display: grid;
+  gap: var(--eth-space-lg);
+  grid-template-columns: minmax(0, 1fr) max-content;
+  min-block-size: 3rem;
+  min-inline-size: 0;
+  padding: var(--eth-space-md);
+}
+
+.eth-activity-subscription-preferences__channel + .eth-activity-subscription-preferences__channel {
+  border-block-start: 1px solid var(--eth-color-border-subtle);
+}
+
+.eth-activity-subscription-preferences__channel--disabled {
+  background: var(--eth-color-layer-02);
+}
+
+.eth-activity-subscription-preferences__channel-copy {
+  display: grid;
+  gap: var(--eth-space-xs);
+  min-inline-size: 0;
+}
+
+.eth-activity-subscription-preferences__channel-label {
+  color: var(--eth-color-text-primary);
+  font-size: calc(0.875rem * var(--eth-text-scale, 1));
+  font-weight: 600;
+  line-height: 1.4286;
+  overflow-wrap: anywhere;
+}
+
+.eth-activity-subscription-preferences__channel--disabled
+  .eth-activity-subscription-preferences__channel-label,
+.eth-activity-subscription-preferences__channel--disabled
+  .eth-activity-subscription-preferences__channel-description {
+  color: var(--eth-color-text-helper);
+}
+
+.eth-activity-subscription-preferences__channel .cds--toggle {
+  margin: 0;
+  max-inline-size: 100%;
+  min-inline-size: 0;
+}
+
+.eth-activity-subscription-preferences__channel-empty,
+.eth-activity-subscription-preferences__empty {
+  background: var(--eth-color-layer-02);
+  padding: var(--eth-space-lg);
+}
+
+.eth-activity-subscription-preferences__empty {
+  border-block-start: 1px solid var(--eth-color-border-subtle);
+  padding-inline: var(--eth-space-xl);
+}
+
+.eth-activity-watcher-list {
+  inline-size: min(100%, 34rem);
+  min-inline-size: 0;
+}
+
+.eth-activity-watcher-list .eth-surface__header {
+  border-block-end: 1px solid var(--eth-color-border-subtle);
+  padding-block-end: var(--eth-space-md);
+}
+
+.eth-activity-watcher-list__items {
+  border: 1px solid var(--eth-color-border-subtle);
+  display: grid;
+  list-style: none;
+  margin: 0;
+  min-inline-size: 0;
+  padding: 0;
+}
+
+.eth-activity-watcher-list__item {
+  align-items: center;
+  background: var(--eth-color-layer-01);
+  display: grid;
+  gap: var(--eth-space-md);
+  grid-template-columns: 2.25rem minmax(0, 1fr) max-content;
+  min-block-size: 3.5rem;
+  min-inline-size: 0;
+  padding: var(--eth-space-md);
+}
+
+.eth-activity-watcher-list__item + .eth-activity-watcher-list__item {
+  border-block-start: 1px solid var(--eth-color-border-subtle);
+}
+
+.eth-activity-watcher-list__avatar {
+  align-items: center;
+  background: var(--eth-color-layer-02);
+  block-size: 2.25rem;
+  border: 1px solid var(--eth-color-border-subtle);
+  color: var(--eth-color-text-primary);
+  display: inline-flex;
+  font-size: calc(0.75rem * var(--eth-text-scale, 1));
+  font-weight: 600;
+  inline-size: 2.25rem;
+  justify-content: center;
+  line-height: 1.3333;
+  overflow: hidden;
+}
+
+.eth-activity-watcher-list__avatar img {
+  block-size: 100%;
+  inline-size: 100%;
+  object-fit: cover;
+}
+
+.eth-activity-watcher-list__identity {
+  display: grid;
+  gap: var(--eth-space-xs);
+  min-inline-size: 0;
+}
+
+.eth-activity-watcher-list__identity strong {
+  color: var(--eth-color-text-primary);
+  font-size: calc(0.875rem * var(--eth-text-scale, 1));
+  font-weight: 600;
+  line-height: 1.4286;
+  overflow-wrap: anywhere;
+}
+
+.eth-activity-watcher-list__identity span,
+.eth-activity-watcher-list__empty {
+  color: var(--eth-color-text-secondary);
+  font-size: calc(0.75rem * var(--eth-text-scale, 1));
+  line-height: 1.3333;
+}
+
+.eth-activity-watcher-list__actions {
+  align-items: center;
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: var(--eth-space-sm);
+  justify-content: flex-end;
+  justify-self: end;
+  min-inline-size: 0;
+}
+
+.eth-activity-watcher-list__actions .eth-icon-button {
+  margin: 0;
+}
+
+.eth-activity-watcher-list__footer {
+  align-items: center;
+  border-block-start: 1px solid var(--eth-color-border-subtle);
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--eth-space-sm);
+  min-inline-size: 0;
+  padding-block-start: var(--eth-space-md);
+}
+
+.eth-activity-watcher-list__empty {
+  background: var(--eth-color-layer-02);
+  border: 1px dashed var(--eth-color-border-subtle);
+  margin: 0;
+  padding: var(--eth-space-lg);
+}
+
+.eth-activity-mention-list {
+  min-inline-size: 0;
+}
+
+.eth-activity-mention-list__items {
+  border-block-start: 1px solid var(--eth-color-border-subtle);
+  display: grid;
+  list-style: none;
+  margin: 0;
+  min-inline-size: 0;
+  padding: 0;
+}
+
+.eth-activity-mention-list__item {
+  align-items: flex-start;
+  border-block-end: 1px solid var(--eth-color-border-subtle);
+  display: grid;
+  gap: var(--eth-space-lg);
+  grid-template-columns: 2.5rem minmax(0, 1fr) max-content;
+  min-inline-size: 0;
+  padding-block: var(--eth-space-lg);
+}
+
+.eth-activity-mention-list__item:last-child {
+  border-block-end: 0;
+}
+
+.eth-activity-mention-list__avatar {
+  align-items: center;
+  background: var(--eth-color-layer-02);
+  block-size: 2.5rem;
+  border: 1px solid var(--eth-color-border-subtle);
+  color: var(--eth-color-text-primary);
+  display: inline-flex;
+  flex: 0 0 auto;
+  font-size: calc(0.75rem * var(--eth-text-scale, 1));
+  font-weight: 600;
+  inline-size: 2.5rem;
+  justify-content: center;
+  line-height: 1.3333;
+}
+
+.eth-activity-mention-list__content {
+  display: grid;
+  gap: var(--eth-space-xs);
+  min-inline-size: 0;
+}
+
+.eth-activity-mention-list__header {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--eth-space-sm);
+  min-inline-size: 0;
+}
+
+.eth-activity-mention-list__sender {
+  color: var(--eth-color-text-primary);
+  font-size: calc(0.875rem * var(--eth-text-scale, 1));
+  font-weight: 600;
+  line-height: 1.4286;
+}
+
+.eth-activity-mention-list__reference {
+  align-items: center;
+  background: var(--eth-color-layer-02);
+  border: 1px solid var(--eth-color-border-subtle);
+  color: var(--eth-color-text-secondary);
+  display: inline-flex;
+  font-family: var(--eth-font-mono, "IBM Plex Mono", monospace);
+  font-size: calc(0.75rem * var(--eth-text-scale, 1));
+  line-height: 1.3333;
+  min-block-size: 1.5rem;
+  padding-inline: var(--eth-space-sm);
+}
+
+.eth-activity-mention-list__excerpt {
+  color: var(--eth-color-text-primary);
+  font-size: calc(0.875rem * var(--eth-text-scale, 1));
+  line-height: 1.4286;
+  margin: 0;
+  overflow-wrap: anywhere;
+}
+
+.eth-activity-mention-list__time,
+.eth-activity-mention-list__empty {
+  color: var(--eth-color-text-secondary);
+  font-size: calc(0.75rem * var(--eth-text-scale, 1));
+  line-height: 1.3333;
+}
+
+.eth-activity-mention-list__time {
+  font-family: var(--eth-font-mono, "IBM Plex Mono", monospace);
+  font-variant-numeric: tabular-nums;
+}
+
+.eth-activity-mention-list__item > .eth-button {
+  justify-self: end;
+  min-inline-size: 5rem;
+}
+
+.eth-activity-mention-list__empty {
+  background: var(--eth-color-layer-02);
+  border: 1px dashed var(--eth-color-border-subtle);
+  margin: 0;
+  padding: var(--eth-space-lg);
+}
+
+.eth-activity-incident-panel {
+  min-inline-size: 0;
+}
+
+.eth-activity-incident-panel__list {
+  display: grid;
+  gap: var(--eth-space-md);
+  min-inline-size: 0;
+}
+
+.eth-activity-incident-panel__incident {
+  --eth-activity-incident-accent: var(--eth-color-info);
+  --eth-activity-incident-row: var(--eth-color-layer-02);
+  --eth-activity-incident-row-border: var(--eth-color-border-subtle);
+
+  background: var(--eth-activity-incident-row);
+  border: 1px solid var(--eth-activity-incident-row-border);
+  border-inline-start: 4px solid var(--eth-activity-incident-accent);
+  color: var(--eth-color-text-primary);
+  display: grid;
+  gap: var(--eth-space-md);
+  min-inline-size: 0;
+  padding: var(--eth-space-lg);
+}
+
+.eth-activity-incident-panel__incident[data-severity="danger"] {
+  --eth-activity-incident-accent: var(--eth-color-danger);
+}
+
+.eth-activity-incident-panel__incident[data-severity="warning"] {
+  --eth-activity-incident-accent: var(--eth-color-warning);
+}
+
+.eth-activity-incident-panel__incident[data-severity="success"] {
+  --eth-activity-incident-accent: var(--eth-color-success);
+}
+
+.eth-activity-incident-panel__incident-header {
+  align-items: flex-start;
+  display: grid;
+  gap: var(--eth-space-md);
+  grid-template-columns: minmax(0, 1fr) max-content;
+  min-inline-size: 0;
+}
+
+.eth-activity-incident-panel__summary {
+  display: grid;
+  gap: var(--eth-space-xs);
+  min-inline-size: 0;
+}
+
+.eth-activity-incident-panel__summary h3 {
+  color: var(--eth-color-text-primary);
+  font-size: calc(1rem * var(--eth-text-scale, 1));
+  font-weight: 600;
+  line-height: 1.375;
+  margin: 0;
+  overflow-wrap: anywhere;
+}
+
+.eth-activity-incident-panel__summary p,
+.eth-activity-incident-panel__empty {
+  color: var(--eth-color-text-secondary);
+  font-size: calc(0.875rem * var(--eth-text-scale, 1));
+  line-height: 1.4286;
+  margin: 0;
+}
+
+.eth-activity-incident-panel__severity {
+  justify-self: end;
+}
+
+.eth-activity-incident-panel__metadata {
+  background: var(--eth-activity-incident-row-border);
+  border: 1px solid var(--eth-activity-incident-row-border);
+  display: grid;
+  gap: 1px;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
+  margin: 0;
+  min-inline-size: 0;
+}
+
+.eth-activity-incident-panel__metadata div {
+  background: var(--eth-color-layer-01);
+  min-inline-size: 0;
+  padding: var(--eth-space-md);
+}
+
+.eth-activity-incident-panel__metadata dt {
+  color: var(--eth-color-text-secondary);
+  font-size: calc(0.75rem * var(--eth-text-scale, 1));
+  line-height: 1.3333;
+  margin: 0 0 var(--eth-space-xs);
+}
+
+.eth-activity-incident-panel__metadata dd {
+  color: var(--eth-color-text-primary);
+  font-size: calc(0.875rem * var(--eth-text-scale, 1));
+  font-weight: 600;
+  line-height: 1.4286;
+  margin: 0;
+  min-inline-size: 0;
+}
+
+.eth-activity-incident-panel__metadata time {
+  font-family: var(--eth-font-mono, "IBM Plex Mono", monospace);
+  font-variant-numeric: tabular-nums;
+}
+
+.eth-activity-incident-panel__status {
+  --eth-activity-incident-status-color: var(--eth-color-info);
+
+  align-items: center;
+  display: inline-flex;
+  gap: var(--eth-space-xs);
+  max-inline-size: 100%;
+  min-inline-size: 0;
+}
+
+.eth-activity-incident-panel__status > span {
+  background: var(--eth-activity-incident-status-color);
+  block-size: 0.5rem;
+  border-radius: 50%;
+  flex: 0 0 auto;
+  inline-size: 0.5rem;
+}
+
+.eth-activity-incident-panel__status[data-status="investigating"] {
+  --eth-activity-incident-status-color: var(--eth-color-warning);
+}
+
+.eth-activity-incident-panel__status[data-status="resolved"] {
+  --eth-activity-incident-status-color: var(--eth-color-success);
+}
+
+.eth-activity-incident-panel__empty {
+  background: var(--eth-color-layer-02);
+  border: 1px dashed var(--eth-color-border-subtle);
+  padding: var(--eth-space-lg);
+}
+
+@media (width <= 42rem) {
+  .eth-activity-notification-center__row {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .eth-activity-notification-center__row > .eth-button {
+    justify-self: start;
+    margin-block-start: 0;
+  }
+
+  .eth-activity-notification-item__main {
+    grid-template-columns: max-content minmax(0, 1fr);
+  }
+
+  .eth-activity-notification-item__severity {
+    grid-row: 1 / span 2;
+  }
+
+  .eth-activity-notification-item__time {
+    grid-column: 2;
+    grid-row: 2;
+    justify-self: start;
+  }
+
+  .eth-activity-notification-item__actions {
+    justify-content: flex-start;
+  }
+
+  .eth-activity-subscription-preferences {
+    inline-size: 100%;
+  }
+
+  .eth-activity-subscription-preferences > .eth-surface__header,
+  .eth-activity-subscription-preferences__category,
+  .eth-activity-subscription-preferences__empty {
+    padding-inline: var(--eth-space-lg);
+  }
+
+  .eth-activity-subscription-preferences__category {
+    grid-template-columns: 1fr;
+  }
+
+  .eth-activity-subscription-preferences__channel {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .eth-activity-watcher-list__item {
+    align-items: start;
+    grid-template-columns: 2.25rem minmax(0, 1fr);
+  }
+
+  .eth-activity-watcher-list__actions {
+    grid-column: 2;
+    justify-content: flex-start;
+    justify-self: start;
+  }
+
+  .eth-activity-mention-list__item {
+    grid-template-columns: 2rem minmax(0, 1fr);
+  }
+
+  .eth-activity-mention-list__avatar {
+    block-size: 2rem;
+    inline-size: 2rem;
+  }
+
+  .eth-activity-mention-list__item > .eth-button {
+    grid-column: 2;
+    justify-self: start;
+  }
+
+  .eth-activity-incident-panel__incident-header {
+    grid-template-columns: 1fr;
+  }
+
+  .eth-activity-incident-panel__severity {
+    justify-self: start;
+  }
+}