From c7aba17303fddaf1e77721dcf35a9992f646f708 Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Wed, 26 Mar 2025 11:45:11 -0500
Subject: [PATCH] Massive refactor for better font sizing and responsive layout

---
 app/assets/stylesheets/base.css               |  17 +-
 app/assets/stylesheets/cards.css              | 165 ++++++++++--------
 app/assets/stylesheets/comments.css           |  91 +++++-----
 app/assets/stylesheets/house.css              |   3 +
 app/assets/stylesheets/layout.css             |   1 +
 app/assets/stylesheets/notifications.css      |   5 +-
 app/assets/stylesheets/pins.css               |   9 +-
 app/assets/stylesheets/terminals.css          |   9 +-
 app/assets/stylesheets/trays.css              |   7 +-
 app/assets/stylesheets/utilities.css          |   6 +-
 app/helpers/notifications_helper.rb           |   2 +-
 app/views/bubbles/_card.html.erb              |   9 +-
 .../bubbles/_display_count_selector.html.erb  |   2 +-
 app/views/bubbles/_messages.html.erb          |   2 +-
 app/views/bubbles/_people.html.erb            |   2 +-
 app/views/bubbles/_tags.html.erb              |  20 ++-
 app/views/bubbles/pins/_pin.html.erb          |   6 +-
 app/views/bubbles/stage_pickers/new.html.erb  |   2 +-
 app/views/comments/_body.html.erb             |  14 +-
 .../event_summaries/_event_summary.html.erb   |   2 +-
 .../notifications/_notification.html.erb      |   6 +-
 app/views/notifications/_tray.html.erb        |   2 +-
 22 files changed, 212 insertions(+), 170 deletions(-)

diff --git a/app/assets/stylesheets/base.css b/app/assets/stylesheets/base.css
index 93ef18ea0..2cc2d56b6 100644
--- a/app/assets/stylesheets/base.css
+++ b/app/assets/stylesheets/base.css
@@ -1,4 +1,12 @@
-html, body {
+html {
+  font-size: 100%;
+
+  @media (min-width: 100ch) {
+    font-size: 1.1875rem;
+  }
+}
+
+body {
   --font-sans: system-ui;
   --font-serif: ui-serif, serif;
   --font-mono: ui-monospace, monospace;
@@ -12,16 +20,11 @@ html, body {
   background: var(--color-bg);
   color: var(--color-ink);
   font-family: var(--font-sans);
-  font-size: var(--text-normal);
-  line-height: 1.4;
+  line-height: 1.375;
   overflow: unset;
   scroll-behavior: auto;
   text-rendering: optimizeLegibility;
   text-size-adjust: none;
-
-  @media (min-width: 100ch) {
-    font-size: var(--text-medium);
-  }
 }
 
 a:not([class]) {
diff --git a/app/assets/stylesheets/cards.css b/app/assets/stylesheets/cards.css
index b0e7ee481..74f27434a 100644
--- a/app/assets/stylesheets/cards.css
+++ b/app/assets/stylesheets/cards.css
@@ -1,70 +1,96 @@
 .cards {
-  --column-gap: 2cqi;
-  --row-gap: 2cqi;
+  --block-space: 2cqi;
+  --container-gap: var(--block-space);
+  --container-padding: calc(var(--block-space) * 1.5);
 
-  font-size: 0.9cqi;
-  display: grid;
+  container-type: inline-size;
+  display: flex;
+  flex-wrap: wrap;
   background-color: var(--color-container);
-  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(100%/2 - var(--column-gap) * 2)), 1fr));
-  justify-items: center;
-  margin-block: 0;
-  padding: 3cqi;
+  inline-size: 100%;
+  margin: 0 auto;
+  max-inline-size: 120ch;
+  padding: var(--container-padding);
+  place-content: center;
   view-transition-name: cards-container;
 
-  > * {
-    flex-shrink: 1;
-  }
-
   .card {
-    max-inline-size: 50cqi;
+    --block-space: 1em;
+    --block-space-half: 0.5em;
+    --card-size: calc(100% - (var(--container-padding) * 2) / 2);
+    --text-xx-large: 1.8em;
+
+    block-size: 50%;
+    font-size: 3cqi;
+    flex: 0 0 var(--card-size);
+    inline-size: var(--card-size);
   }
 
-  @media (min-width: 70ch) {
-    grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(100%/3 - var(--column-gap) * 2)), 1fr));
-    font-size: 0.7cqi;
+  @media (min-width: 80ch) {
+    --block-space: 1cqi;
+    --container-gap: calc(var(--block-space) * 2);
+    --container-padding: calc(var(--block-space) * 2.5);
 
     .card {
-      max-inline-size: 33cqi;
+      --card-size: calc(50% - var(--container-gap) - (var(--container-padding) * 2) / 4);
+      --text-xx-large: 1.6em;
+
+      font-size: 1.5cqi;
+    }
+
+    .card__header,
+    .card__stages {
+      font-size: 0.85em;
+    }
+  }
+
+  @media (min-width: 120ch) {
+    --block-space: 0.9cqi;
+    --container-gap: calc(var(--block-space) * 2);
+    --container-padding: calc(var(--block-space) * 2.5);
+
+    .card {
+      --card-size: calc(33% - var(--container-gap) / 2 - (var(--container-padding) * 2) / 6);
+      --text-xx-large: 1.8em;
+
+      font-size: 1cqi;
+    }
+
+    .card__header,
+    .card__stages {
+      font-size: 0.85em;
     }
   }
 }
 
 .card {
-  --block-space: 1em;
-  --column-gap: 0.5em;
-  --inline-space: 0.5em;
-  --row-gap: 0.5em;
+  --border-radius: 0.2em;
 
-  aspect-ratio: 15/7;
+  aspect-ratio: 2/1;
   background-color: color-mix(in srgb, var(--bubble-color) 4%, var(--color-bg));
   color: color-mix(in srgb, var(--bubble-color) 40%, var(--color-ink));
-  font-size: 1em;
-  max-inline-size: 100ch;
+  max-inline-size: 75ch;
   z-index: 1;
 
   .card__container & {
-    inline-size: 60cqi;
-
-    @media (max-width: 70ch) {
-      inline-size: 100dvw;
-    }
+    inline-size: calc(100dvw - var(--actions-inline-inset) * 2 - var(--btn-size) * 2);
   }
 }
 
 .card__actions {
   position: absolute;
-  inset: 1.4em auto auto -4em;
-  z-index: 1;
+  inset: var(--actions-block-inset) auto auto calc(var(--actions-inline-inset) * -1);
+  z-index: 0;
 }
 
 .card__actions--right {
-  inset: 1.4em -3.5em auto auto;
+  inset: var(--actions-block-inset) calc(var(--actions-inline-inset) * -1) auto auto;
 }
 
 .card__actions-container {
   background-color: var(--color-bg);
-  margin-block-start: -1em;
-  padding: 1em 2em;
+  margin-block: calc(var(--block-space) * -1) var(--block-space);
+  padding: var(--block-space) var(--inline-space-double);
   position: relative;
   z-index: 0;
 
@@ -84,10 +110,6 @@
   }
 }
 
-.card__actions-wrapper {
-  font-size: 1.33cqi;
-}
-
 .cards .card__assignees:not(:has(.avatar)) {
   .txt-uppercase {
     display: none;
@@ -118,25 +140,37 @@
 }
 
 .card__body {
-  padding-inline: 1em;
+  padding-inline: var(--inline-space-double);
 }
 
 .card__body-header {
   flex: 2 1 75%;
-  padding-block: 1em;
+  padding-block: var(--block-space);
 }
 
 .card__bucket {
   background-color: var(--bubble-color); 
   font-weight: 800;
   letter-spacing: 0.5ch;
-  padding: 0.5em 1em;
+  padding: var(--block-space-half) var(--inline-space-double);
 }
 .card__container {
+  --actions-block-inset: 1.5rem;
+  --actions-inline-inset: 1rem;
+  --padding-inline: var(--block-space);
+  --padding-block: var(--block-space) var(--block-space-double); 
+
   background-color: var(--color-container);
-  display: inline-block;
-  font-size: 1.33cqi;
-  padding: 2cqi 3cqi 3cqi;
+  border-radius: 0.2em;
+  display: inline-flex;
+  padding-block: var(--padding-block);
+  padding-inline: var(--padding-inline);
+  
+  @media (min-width: 150ch) {
+    --actions-inline-inset: 4rem;
+    --padding-inline: calc(var(--block-space-double) + var(--block-space));
+    --padding-block: var(--block-space-double) calc(var(--block-space-double) + var(--block-space-half)); 
+  }
 }
 
 .card__container--pointing {
@@ -167,12 +201,11 @@
 }
 
 .card__footer {
-  margin-block-end: 1em;
-  padding-inline-end: 1em;
+  margin-block-end: var(--block-space);
 }
 
 .card__header {
-  padding-inline-end: 0.7em;
+  padding-inline-end: var(--inline-space);
 }
 
 .card__hide-on-index {
@@ -198,8 +231,7 @@
   --border-color: var(--bubble-color);
   --row-gap: 0.25em;
 
-  font-size: 0.9em;
-  margin-inline-start: 1em;
+  margin-inline-start: var(--inline-space-double);
 
   strong {
     font-size: 1.1em;
@@ -211,22 +243,8 @@
   }
 }
 
-.card__people {
-  margin-inline-start: 1em;
-
-  span {
-    font-size: 0.9em;
-  }
-}
-
 .card__stages {
   flex: 1 1 25%;
-  font-size: 0.8em;
-  padding-block: 1em;
-}
-
-.card__tags {
-  color: var(--bubble-color);
 }
 
 .card__tag {
@@ -234,11 +252,15 @@
   font-weight: 700;
 }
 
+.card__tags {
+  color: var(--bubble-color);
+}
+
 .card__title {
   --hover-size: 0;
   --input-border-radius: 0;
 
-  font-size: 2.5em; 
+  font-size: var(--text-xx-large); 
   font-weight: 900; 
   line-height: 1.1; 
   min-block-size: 3lh;
@@ -266,7 +288,6 @@
 }
 
 .card-count__selector {
-  font-size: 1cqi;
   inset: 0.5cqi 0.5cqi auto auto;
   position: absolute;
   text-align: start;
@@ -282,7 +303,6 @@
   --input-padding: 0;
 
   color: inherit;
-  font-size: 1.1em !important;
   font-weight: inherit;
   inline-size: min-content;
   max-inline-size: 3ch;
@@ -290,24 +310,29 @@
 
   @supports (field-sizing: content) {
     field-sizing: content;
+    max-inline-size: unset;
   }
 }
 
 .card__popped {
   align-items: center;
   aspect-ratio: 7/4;
-  border: 0.4rem solid var(--bubble-color);
+  border: var(--block-space-half) solid var(--bubble-color);
   position: absolute;
-  inset: auto 2em 2em auto;
+  inset: auto var(--block-space) var(--block-space-double) auto;
   justify-content: space-between;
-  padding: 0.5em 1em;
+  padding: var(--block-space-half) calc(var(--inline-space) * 1.5);
   transform: rotate(-10deg);
   z-index: 1;
 }
 
+.card__popped-by {
+  border-block-end: 1px dashed currentcolor;
+}
+
 .card__popped-title {
   color: var(--color-ink-reversed);
-  font-size: 1.5em;
+  font-size: var(--text-rel-large);
   font-weight: 900;
   text-shadow:
    -2px -2px 0 var(--bubble-color),  
diff --git a/app/assets/stylesheets/comments.css b/app/assets/stylesheets/comments.css
index 4d148fbbe..75cf2012d 100644
--- a/app/assets/stylesheets/comments.css
+++ b/app/assets/stylesheets/comments.css
@@ -2,6 +2,7 @@
   --avatar-size: 2.33em;
   --comment-padding-block: var(--block-space);
   --comment-padding-inline: var(--inline-space-double);
+  --comment-max: 70ch;
 
   display: flex;
   flex-direction: column;
@@ -14,16 +15,28 @@
   }
 }
 
-.comment {
-  margin-inline: auto;
-  max-inline-size: 80ch;
-  position: relative;
+.comments__subscribers {
+  max-inline-size: var(--comment-max);
+  padding-inline: calc(var(--comment-padding-block) + var(--inline-space-double));
 }
 
-.comment--new,
-.comment--edit {
+.comment {
+  margin-inline: auto;
+  max-inline-size: var(--comment-max);
+  position: relative;
+
   house-md-toolbar {
-    border-block-end: 1px solid var(--color-subtle-dark);
+    margin-block-start: calc(var(--comment-padding-block) * -0.5);
+  }
+
+  .house-md-content {
+    padding: var(--comment-padding-block) 0 0;
+  }
+}
+
+.comment__author {
+  .btn {
+    font-weight: inherit;
   }
 }
 
@@ -36,14 +49,6 @@
   }
 }
 
-.comment__edit {
-  display: none;
-
-  .comment--mine & {
-    display: grid;
-  }
-}
-
 .comment__body {
   p {
     &:first-child {
@@ -59,10 +64,29 @@
 .comment__content {
   background-color: var(--color-subtle-light);
   border-radius: 0.2em;
-  padding: var(--comment-padding-block) var(--comment-padding-inline);
-  
-  .comment--mine_ & {
-    margin-inline: 0 calc(var(--comment-padding-inline) * 2);
+  padding: 
+    var(--comment-padding-block) 
+    var(--comment-padding-inline);
+}
+
+.comment__edit {
+  --btn-icon-size: 1.2rem;
+
+  display: none;
+
+  .comment--mine & {
+    display: grid;
+  }
+}
+
+.comment__event {
+  max-inline-size: var(--comment-max);
+
+  &::before {
+    /* Make up space for lack of avatar */
+    content: "";
+    display: flex;
+    inline-size: calc(var(--comment-padding-inline) * 0.75);
   }
 }
 
@@ -70,7 +94,6 @@
   --input-border-size: 0;
   --input-padding: 0;
 
-  line-height: inherit;
   min-block-size: calc(9lh + (2 * var(--comment-padding-block)));
   min-inline-size: 100%;
 
@@ -79,31 +102,3 @@
     min-block-size: calc(9lh + (2 * var(--comment-padding-block)));
   }
 }
-
-.comment--mine_ {
-  flex-direction: row-reverse;
-  margin-inline: auto 0;
-
-  .comment__author {
-    flex-direction: row-reverse;
-  }
-}
-
-.comments__subscribers {
-  max-inline-size: 80ch;
-  padding-inline: calc(var(--comment-padding-block) + var(--inline-space-double));
-}
-
-.comment__timestamp {
-  color: var(--color-subtle-dark);
-}
-
-.event-summary {
-  max-inline-size: 80ch;
-
-  &::before{
-    content: "";
-    display: flex;
-    inline-size: calc(var(--comment-padding-inline) * 0.75);
-  }
-}
diff --git a/app/assets/stylesheets/house.css b/app/assets/stylesheets/house.css
index c1ebba2b1..cf9be0599 100644
--- a/app/assets/stylesheets/house.css
+++ b/app/assets/stylesheets/house.css
@@ -13,10 +13,13 @@ house-md {
 /* Toolbar */
 house-md-toolbar {
   background-color: inherit;
+  border-block-end: 1px solid var(--color-subtle-dark);
   border-radius: 0;
   color: currentColor;
   display: inline-flex;
   font-size: inherit;
+  max-inline-size: 100%;
+  overflow-x: auto;
   padding: 0.2em;
 
   button, label {
diff --git a/app/assets/stylesheets/layout.css b/app/assets/stylesheets/layout.css
index b2b3c2356..cd27f6305 100644
--- a/app/assets/stylesheets/layout.css
+++ b/app/assets/stylesheets/layout.css
@@ -36,6 +36,7 @@ body {
   view-transition-name: header;
 
   > nav {
+    font-size: var(--text-small);
     view-transition-name: nav;
 
     header {
diff --git a/app/assets/stylesheets/notifications.css b/app/assets/stylesheets/notifications.css
index d5786b898..66be85591 100644
--- a/app/assets/stylesheets/notifications.css
+++ b/app/assets/stylesheets/notifications.css
@@ -41,7 +41,10 @@
 
 .notification__content {
   --border-color: transparent;
-  --border-radius: 0.3em;
+  --border-radius: 0.2em;
+  --padding: 0.75em 0.5em;
+
+  padding: var(--padding);
 
   @media (prefers-color-scheme: dark) {
     --border-color: var(--color-subtle-dark);
diff --git a/app/assets/stylesheets/pins.css b/app/assets/stylesheets/pins.css
index 96eeed40e..889a0bfbe 100644
--- a/app/assets/stylesheets/pins.css
+++ b/app/assets/stylesheets/pins.css
@@ -17,14 +17,15 @@
   background-color: var(--bubble-color);
   font-weight: 800;
   letter-spacing: 0.3ch;
-  padding: 0.3em 0.3em 0.3em 0.85em;
+  padding: 0.3em 0.6em 0.3em 1.5em;
 }
 
 .pin__content {
   --border-color: transparent;
-  --border-radius: 0.3em;
+  --border-radius: 0.2em;
+  --padding: 0.75em;
 
-  padding: 0.85em 0.85em 1em;
+  padding: var(--padding);
 
   @media (prefers-color-scheme: dark) {
     --border-color: var(--color-subtle-dark);
@@ -32,7 +33,7 @@
 }
 
 .pin__header {
-  margin: -0.85em -0.85em auto;
+  margin: calc(var(--padding) * -1) calc(var(--padding) * -1) auto;
   padding: 0 0.2em 0 0;
 }
 
diff --git a/app/assets/stylesheets/terminals.css b/app/assets/stylesheets/terminals.css
index c691a1ade..788e8b508 100644
--- a/app/assets/stylesheets/terminals.css
+++ b/app/assets/stylesheets/terminals.css
@@ -10,6 +10,11 @@
   position: fixed;
   z-index: 1;
 
+  @media (prefers-color-scheme: dark) {
+    background-color: var(--color-always-black);
+    border-block-start: 1px solid var(--color-subtle-dark);
+  }
+
   .terminal__input {
     --input-border-color: transparent;
     --input-border-radius: 0.3em;
@@ -23,12 +28,12 @@
     font-family: inherit;
 
     &::placeholder {
-      color: var(--color-positive-light);
+      color: var(--color-always-white);
       opacity: 0.5;
     }
 
     .terminal__link & {
-      color: var(--color-positive-light);
+      color: var(--color-always-white);
       opacity: 0.5;
     }
   }
diff --git a/app/assets/stylesheets/trays.css b/app/assets/stylesheets/trays.css
index f1de034d6..16c976e3c 100644
--- a/app/assets/stylesheets/trays.css
+++ b/app/assets/stylesheets/trays.css
@@ -3,7 +3,7 @@
 }
 
 .tray {
-  --height: calc(2.81lh + var(--block-space));
+  --height: calc(2.57lh + var(--block-space));
 
   background-color: transparent;
   border: 0;
@@ -101,7 +101,7 @@
 }
 
 .tray__item-meta {
-  font-size: var(--text-small);
+  font-size: var(--text-x-small);
   font-weight: 500;
 }
 
@@ -115,12 +115,13 @@
 
   block-size: var(--height);
   display: none;
-  inset: auto auto 0;
+  inset: auto 0.1ch 0 auto;
   inline-size: var(--tray-size);
   pointer-events: none;
   position: absolute;
   scale: var(--scale);
   transform: translateY(var(--offset));
+  transform-origin: center;
   transition: scale 0.2s ease-out, transform 0.2s ease-out;
   z-index: var(--z);
 
diff --git a/app/assets/stylesheets/utilities.css b/app/assets/stylesheets/utilities.css
index 0c6f60c5f..39ec9a4f3 100644
--- a/app/assets/stylesheets/utilities.css
+++ b/app/assets/stylesheets/utilities.css
@@ -8,14 +8,14 @@
   --block-space-double: calc(var(--block-space) * 2);
 
   /* Text sizes */
-  --text-xx-small: 0.6rem;
+  --text-xx-small: 0.55rem;
   --text-x-small: 0.7rem;
   --text-small: 0.8rem;
   --text-normal: 1rem;
   --text-medium: 1.1rem;
   --text-large: 1.5rem;
   --text-x-large: 1.8rem;
-  --text-xx-large: 2.4rem;
+  --text-xx-large: 2.5rem;
 }
 
 /* Text */
@@ -183,7 +183,7 @@
 .borderless { border: 0; }
 
 /* Border radius */
-.border-radius { border-radius: var(--border-radius, 1em); }
+.border-radius { border-radius: var(--border-radius, 0.5em); }
 
 /* Shadows */
 .shadow {
diff --git a/app/helpers/notifications_helper.rb b/app/helpers/notifications_helper.rb
index 2c8950e31..e853e55e6 100644
--- a/app/helpers/notifications_helper.rb
+++ b/app/helpers/notifications_helper.rb
@@ -25,7 +25,7 @@ module NotificationsHelper
     tag.div id: dom_id(notification), class: "notification tray__item border-radius flex position-relative txt-normal" do
       concat(
         link_to(notification.resource,
-          class: "notification__content border-radius pad shadow fill-white flex align-start txt-align-start gap flex-item-grow max-width border txt-ink",
+          class: "notification__content border-radius shadow fill-white flex align-start txt-align-start gap flex-item-grow max-width border txt-ink",
           data: { action: "click->dialog#close", turbo_frame: "_top" },
           &)
       )
diff --git a/app/views/bubbles/_card.html.erb b/app/views/bubbles/_card.html.erb
index 842cb06c1..245b5949a 100644
--- a/app/views/bubbles/_card.html.erb
+++ b/app/views/bubbles/_card.html.erb
@@ -1,6 +1,7 @@
 <% cache bubble do %>
-  <article class="card flex flex-column position-relative txt-align-start full-width" 
-        style="--bubble-color: <%= bubble.color %>; view-transition-name: <%= dom_id(bubble, :ticket) %>;" id="<%= dom_id(bubble, :ticket) %>">
+  <article class="card flex flex-column position-relative txt-align-start full-width border-radius" 
+        style="--bubble-color: <%= bubble.color %>; view-transition-name: <%= dom_id(bubble, :ticket) %>;" 
+        id="<%= dom_id(bubble, :ticket) %>">
     <header class="card__header flex align-center gap min-width">
       <%= link_to bubble.bucket.name, bubbles_path(bucket_ids: [ bubble.bucket ]), 
             class: "card__bucket txt-uppercase overflow-ellipsis txt-reversed" %>
@@ -32,7 +33,7 @@
       <%= turbo_frame_tag dom_id(bubble, :stage_picker), src: new_bucket_bubble_stage_picker_path(bubble.bucket, bubble) %>
     </div>
 
-    <footer class="card__footer full-width flex align-center gap">
+    <footer class="card__footer full-width flex align-start gap">
       <%= render "bubbles/people", bubble: bubble %>
       <%= render "bubbles/meta", bubble: bubble %>
     </footer>
@@ -45,7 +46,7 @@
       <div class="card__popped flex flex-column">
         <span class="card__popped-title txt-uppercase">Completed</span>
         <strong><%= bubble.popped_at.strftime("%b %d, %Y") %></strong>
-        <span>by <span style="border-block-end: 1px dashed var(--color-ink);"><%= bubble.popped_by.name %></span></span>
+        <span>by <span class="card__popped-by"><%= bubble.popped_by.name %></span></span>
       </div>
     <% end %>
   </article>
diff --git a/app/views/bubbles/_display_count_selector.html.erb b/app/views/bubbles/_display_count_selector.html.erb
index 8d4d169af..75c3ad3ae 100644
--- a/app/views/bubbles/_display_count_selector.html.erb
+++ b/app/views/bubbles/_display_count_selector.html.erb
@@ -1,4 +1,4 @@
-<div class="card-count__selector" data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">
+<div class="card-count__selector txt-x-small" data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">
   <button class="btn borderless btn--circle" 
           data-action="click->dialog#open:stop"
           aria-haspopup="dialog"
diff --git a/app/views/bubbles/_messages.html.erb b/app/views/bubbles/_messages.html.erb
index 9b24cca59..c28e26eae 100644
--- a/app/views/bubbles/_messages.html.erb
+++ b/app/views/bubbles/_messages.html.erb
@@ -3,7 +3,7 @@
   <%# Template Dependency: event_summaries/event_summary %>
   <%= render bubble.messages, cached: true %>
   <%= render "comments/new", bubble: bubble, cached: true %>
-  <div class="comments__subscribers flex flex-column margin-block-double txt-align-start full-width">
+  <div class="comments__subscribers flex flex-column margin-block txt-align-start full-width">
     <strong class="txt-uppercase">Subscribers</strong>
     <p class="margin-none-block-start margin-block-end-half"><%= pluralize(@bubble.watchers.count, "person") %> will be notified when someone comments on this.</p>
     <div class="flex align-center flex-wrap gap-half max-width txt-normal">
diff --git a/app/views/bubbles/_people.html.erb b/app/views/bubbles/_people.html.erb
index 68268ce55..7a2562657 100644
--- a/app/views/bubbles/_people.html.erb
+++ b/app/views/bubbles/_people.html.erb
@@ -1,4 +1,4 @@
-<div class="card__people flex gap">
+<div class="card__people flex gap margin-inline-start">
   <div class="flex flex-column align-center">
     <span class="txt-uppercase">Reported</span>
     <%= avatar_tag bubble.creator, loading: :lazy, class: "avatar" %>
diff --git a/app/views/bubbles/_tags.html.erb b/app/views/bubbles/_tags.html.erb
index 82c52772c..bfd05a235 100644
--- a/app/views/bubbles/_tags.html.erb
+++ b/app/views/bubbles/_tags.html.erb
@@ -1,14 +1,16 @@
 <%= turbo_frame_tag bubble, :tags do %>
-  <div class="card__tags flex align-center flex-item-grow">
-    <% if bubble.tags.any? || bubble.creating? %>
-      <span># </span>
-      <% bubble.tags.each_with_index do |tag, index| %>
-        <%= link_to bubbles_path(bucket_ids: [ bubble.bucket ], tag_ids: [ tag.id ]),
-                    class: "card__tag btn btn--plain min-width txt-uppercase fill-transparent", data: { turbo_frame: "_top" } do %>
-          <span class="overflow-ellipsis"><%= tag.title %></span>
-        <% end %><%= ", " unless index == bubble.tags.size - 1 %>
-      <% end %>
+  <div class="card__tags flex align-center flex-item-grow min-width">
+    <div class="overflow-ellipsis">
+      <% if bubble.tags.any? || bubble.creating? %>
+        <span># </span>
+        <% bubble.tags.each_with_index do |tag, index| %>
+          <%= link_to bubbles_path(bucket_ids: [ bubble.bucket ], tag_ids: [ tag.id ]),
+                      class: "card__tag btn btn--plain min-width txt-uppercase fill-transparent", data: { turbo_frame: "_top" } do %>
+            <span class="overflow-ellipsis"><%= tag.title %></span>
+          <% end %><%= ", " unless index == bubble.tags.size - 1 %>
+        <% end %>
     <% end %>
+    </div>
 
     <div class="position-relative" data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">
       <button class="tag-picker__button btn card__hide-on-index <%= bubble.creating? || bubble.drafted? ? "fill-highlight" : "fill-transparent" %>" data-action="click->dialog#open:stop">
diff --git a/app/views/bubbles/pins/_pin.html.erb b/app/views/bubbles/pins/_pin.html.erb
index b03af7858..f741cca92 100644
--- a/app/views/bubbles/pins/_pin.html.erb
+++ b/app/views/bubbles/pins/_pin.html.erb
@@ -4,9 +4,9 @@
           class: "pin__content shadow fill-white flex align-start txt-align-start gap flex-item-grow max-width border border-radius txt-ink overflow-clip",
           data: { action: "click->dialog#close", turbo_frame: "_top" },
           style: "--bubble-color: #{ pin.bubble.color };" do %>
-      <div class="flex flex-column min-width flex-item-grow txt-small">
+      <div class="flex flex-column min-width flex-item-grow">
         <div class="pin__header flex gap-half align-center txt-uppercase">
-          <div class="pin__bucket flex-inline flex-item-justify-start txt-reversed min-width">
+          <div class="pin__bucket flex-inline flex-item-justify-start txt-reversed min-width txt-xx-small">
             <span class="txt-xx-small overflow-ellipsis"><%= pin.bubble.bucket.name %></span>
           </div>
 
@@ -17,7 +17,7 @@
           <% end %>
         </div>
   
-        <strong class="pin__title overflow-ellipsis"><%= bubble_title(pin.bubble) %></strong>
+        <strong class="pin__title overflow-ellipsis txt-small"><%= bubble_title(pin.bubble) %></strong>
   
         <div class="tray__item-meta flex align-end gap-half txt-tight-lines">
           <div class="translucent">
diff --git a/app/views/bubbles/stage_pickers/new.html.erb b/app/views/bubbles/stage_pickers/new.html.erb
index 2a60d9f35..8ba2d10c4 100644
--- a/app/views/bubbles/stage_pickers/new.html.erb
+++ b/app/views/bubbles/stage_pickers/new.html.erb
@@ -1,6 +1,6 @@
 <%= turbo_frame_tag dom_id(@bubble, :stage_picker) do %>
   <% if @selected_workflow %>
-    <div class="card__stages flex flex-column max-width min-width">
+    <div class="card__stages flex flex-column max-width min-width pad-block">
       <% @selected_workflow.stages.each do |stage| %>
         <%= button_to_set_stage @bubble, stage %>
       <% end %>
diff --git a/app/views/comments/_body.html.erb b/app/views/comments/_body.html.erb
index c3511a671..17865d4be 100644
--- a/app/views/comments/_body.html.erb
+++ b/app/views/comments/_body.html.erb
@@ -2,16 +2,18 @@
   <%= turbo_frame_tag dom_id(comment) do %>
     <div class="comment__content flex flex-column flex-item-grow full-width">
       <div class="comment__author flex align-center gap-half">
-        <strong><%= link_to comment.creator.name, user_path(comment.creator), class: "txt-ink btn btn--plain fill-transparent", data: { turbo_frame: "_top" } %></strong>
+        <strong>
+          <%= link_to comment.creator.name, user_path(comment.creator), class: "txt-ink btn btn--plain fill-transparent", data: { turbo_frame: "_top" } %>
+        </strong>
+
         <%= link_to bucket_bubble_path(comment.bubble.bucket, comment.bubble, anchor: "comment_#{comment.id}"), class: "txt-undecorated txt-uppercase" do %>
-          <%= local_datetime_tag comment.created_at, style: :shortdate, class: "comment__timestamp" %>
+          <%= local_datetime_tag comment.created_at, style: :shortdate, class: "txt-ink translucent" %>
         <% end %>
 
         <%= link_to edit_bucket_bubble_comment_path(comment.bubble.bucket, comment.bubble, comment), 
-            class: "btn txt-small btn--plain fill-transparent comment__edit flex-item-justify-start", 
-            style: "font-size: 0.4em; opacity: 0.5;" do %>
-          <%= image_tag "menu-dots-horizontal.svg", class: "icon colorize--black" %>
-          <span class="for-screen-reader">Edit</span>
+              class: "comment__edit btn btn--plain txt-xx-small fill-transparent translucent flex-item-justify-end" do %>
+          <%= image_tag "menu-dots-horizontal.svg", class: "colorize--black" %>
+          <span class="for-screen-reader">Edit this comment</span>
         <% end %>
       </div>
       <div class="comment__body txt-align-start">
diff --git a/app/views/event_summaries/_event_summary.html.erb b/app/views/event_summaries/_event_summary.html.erb
index a8e907e0e..3c3cf8bf9 100644
--- a/app/views/event_summaries/_event_summary.html.erb
+++ b/app/views/event_summaries/_event_summary.html.erb
@@ -1,5 +1,5 @@
 <% unless event_summary.body.blank? %>
-  <div class="event-summary comment flex full-width">
+  <div class="comment comment__event flex full-width">
     <div class="comment__content txt-tight-lines full-width" data-controller="event-summary">
       <%= event_summary.body %>
     </div>
diff --git a/app/views/notifications/_notification.html.erb b/app/views/notifications/_notification.html.erb
index c1a19540b..69f408d52 100644
--- a/app/views/notifications/_notification.html.erb
+++ b/app/views/notifications/_notification.html.erb
@@ -4,9 +4,9 @@
       <%= avatar_image_tag(notification.creator) %>
     </div>
 
-    <div class="flex flex-column txt-tight-lines min-width flex-item-grow txt-small">
-      <strong class="overflow-ellipsis notification__title"><%= notification_title(notification) %></strong>
-        <div class="overflow-ellipsis">
+    <div class="flex flex-column min-width flex-item-grow">
+      <strong class="overflow-ellipsis notification__title txt-small txt-tight-lines"><%= notification_title(notification) %></strong>
+        <div class="overflow-ellipsis txt-small txt-tight-lines">
           <% if notification.event.action == "commented" %>
             <%= "#{ strip_tags(notification.event.comment.body_html).blank? ? "#{ notification.event.creator.name } replied" : "#{ notification.event.creator.name }:" } #{ strip_tags(notification.event.comment.body_html).truncate(200) }" %>
           <% else %>
diff --git a/app/views/notifications/_tray.html.erb b/app/views/notifications/_tray.html.erb
index 9537730f1..444ab83c8 100644
--- a/app/views/notifications/_tray.html.erb
+++ b/app/views/notifications/_tray.html.erb
@@ -9,7 +9,7 @@
   <%= turbo_frame_tag("notifications", src: notifications_tray_path) -%>
 
   <%= link_to notifications_path, class: "tray__overflow border-radius txt-normal", data: { action: "click->dialog#close"} do %>
-    <div class="notification__content border-radius pad shadow fill-white flex align-center txt-align-center gap full-width border txt-ink txt-small">
+    <div class="notification__content border-radius shadow fill-white flex align-center txt-align-center gap full-width border txt-ink txt-small">
       <div class="flex flex-column txt-tight-lines min-width flex-item-grow">
         <strong>+ More…</strong>
       </div>