From b5b3d1cd37a1abe850af1890619e94539624a588 Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Tue, 17 Mar 2026 11:33:49 -0500
Subject: [PATCH] Style messages for account limits

---
 app/assets/stylesheets/card-perma.css         |   8 ++
 app/assets/stylesheets/comments.css           | 120 ++++++++++--------
 .../saas/_storage_limit_exceeded.html.erb     |  14 +-
 .../saas/_storage_limit_exceeded.html.erb     |   8 +-
 .../saas/_storage_limit_notice.html.erb       |   5 +-
 5 files changed, 96 insertions(+), 59 deletions(-)

diff --git a/app/assets/stylesheets/card-perma.css b/app/assets/stylesheets/card-perma.css
index 3dc16d5a2..e204547b4 100644
--- a/app/assets/stylesheets/card-perma.css
+++ b/app/assets/stylesheets/card-perma.css
@@ -511,4 +511,12 @@
       }
     }
   }
+
+  .card-perma__account-limit-message {
+    background-color: var(--color-canvas);
+    border: 2px solid var(--color-container);
+    border-radius: 4px;
+    margin-block-start: calc(var(--padding-block) / -2);
+    padding: 1ch 2ch;
+  }
 }
diff --git a/app/assets/stylesheets/comments.css b/app/assets/stylesheets/comments.css
index 2369d62b3..21578572b 100644
--- a/app/assets/stylesheets/comments.css
+++ b/app/assets/stylesheets/comments.css
@@ -1,4 +1,7 @@
 @layer components {
+  /* List
+  /* ------------------------------------------------------------------------ */
+
   .comments {
     --avatar-size: 2.33em;
     --comment-padding-block: var(--block-space-half);
@@ -21,10 +24,8 @@
     }
   }
 
-  .comments__subscribers {
-    max-inline-size: var(--comment-max);
-    padding-inline: calc(var(--comment-padding-block) + var(--inline-space-double));
-  }
+  /* Comment
+  /* ------------------------------------------------------------------------ */
 
   .comment {
     /* Distinguish from the .comment class used for code formatting without extra specificity */
@@ -35,52 +36,6 @@
       position: relative;
     }
 
-    .comment-by-system & {
-      --comment-padding-block: var(--block-space-half);
-
-      text-align: center;
-
-      &::before {
-        /* Make up space for lack of avatar */
-        content: "";
-        display: flex;
-        inline-size: calc(var(--comment-padding-inline) * 0.9);
-      }
-
-      .comment__avatar {
-        display: none;
-      }
-
-      .comment__author {
-        a { margin: 0 auto; }
-        h3 { margin-inline: auto; }
-        strong { display: none; }
-      }
-
-      .comment__body {
-        padding: 0;
-        text-align: center;
-      }
-
-      .comment__content {
-        --stripe-color: var(--color-ink-lightest);
-
-        background-image: repeating-linear-gradient(
-          45deg in srgb,
-          var(--color-canvas) 0 1px,
-          var(--stripe-color) 1px 10px);
-        padding-inline: var(--comment-padding-inline);
-
-        .comments--system-expanded .comment-by-system & {
-          --stripe-color: color-mix(in srgb, var(--card-color) 10%, var(--color-canvas));
-        }
-      }
-
-      .reactions {
-        display: none !important;
-      }
-    }
-
     .reactions {
       margin-block-start: var(--block-space-half);
       margin-inline: calc(var(--column-gap) / -1);
@@ -195,7 +150,12 @@
     }
   }
 
+  /* System comment
+  /* ------------------------------------------------------------------------ */
+
   .comment-by-system {
+    --stripe-color: var(--color-ink-lightest);
+
     display: none;
     transition: var(--dialog-duration) allow-discrete;
     transition-property: display;
@@ -203,6 +163,50 @@
     .comments--system-expanded & {
       display: contents;
     }
+
+    .comment {
+      --comment-padding-block: var(--block-space-half);
+
+      text-align: center;
+
+      &::before {
+        /* Make up space for lack of avatar */
+        content: "";
+        display: flex;
+        inline-size: calc(var(--comment-padding-inline) * 0.9);
+      }
+    }
+
+    .comment__avatar {
+      display: none;
+    }
+
+    .comment__author {
+      a { margin: 0 auto; }
+      h3 { margin-inline: auto; }
+      strong { display: none; }
+    }
+
+    .comment__body {
+      padding: 0;
+      text-align: center;
+    }
+
+    .comment__content {
+      background-image: repeating-linear-gradient(
+        45deg in srgb,
+        var(--color-canvas) 0 1px,
+        var(--stripe-color) 1px 10px);
+      padding-inline: var(--comment-padding-inline);
+
+      .comments--system-expanded .comment-by-system & {
+        --stripe-color: color-mix(in srgb, var(--card-color) 10%, var(--color-canvas));
+      }
+    }
+
+    .reactions {
+      display: none !important;
+    }
   }
 
   /* Show the last system comment */
@@ -220,4 +224,20 @@
       display: none;
     }
   }
+
+  .comment-by-system--account-limit {
+    --stripe-color: oklch(var(--lch-blue-lightest));
+
+    .comment__content {
+      padding: 3ch;
+    }
+  }
+
+  /* Subscribers
+  /* ------------------------------------------------------------------------ */
+
+  .comments__subscribers {
+    max-inline-size: var(--comment-max);
+    padding-inline: calc(var(--comment-padding-block) + var(--inline-space-double));
+  }
 }
diff --git a/saas/app/views/cards/comments/saas/_storage_limit_exceeded.html.erb b/saas/app/views/cards/comments/saas/_storage_limit_exceeded.html.erb
index 6be5fb587..82ab7f25e 100644
--- a/saas/app/views/cards/comments/saas/_storage_limit_exceeded.html.erb
+++ b/saas/app/views/cards/comments/saas/_storage_limit_exceeded.html.erb
@@ -1,4 +1,12 @@
-<div class="full-width pad-inline center margin-block txt-small txt-ink-medium">
-  <strong>This account has used all <%= number_to_human_size(Account::StorageLimited::STORAGE_LIMIT) %> of free storage.</strong>
-  <%= link_to "Self-host Fizzy", "https://github.com/basecamp/fizzy", target: "_blank" %> for unlimited storage.
+<div class="comment-by-system comment-by-system--account-limit">
+  <div class="comment align-start full-width">
+    <div class="comment__content flex flex-column flex-item-grow full-width">
+      <div class="comment__body lexxy-content">
+        <div class="action-text-content">
+          <strong>This account has used all the included free storage (<%= number_to_human_size(Account::StorageLimited::STORAGE_LIMIT) %>).</strong>
+          <div><%= link_to "Self-host Fizzy", "https://github.com/basecamp/fizzy", target: "_blank" %> for unlimited storage.</div>
+        </div>
+      </div>
+    </div>
+  </div>
 </div>
diff --git a/saas/app/views/cards/container/footer/saas/_storage_limit_exceeded.html.erb b/saas/app/views/cards/container/footer/saas/_storage_limit_exceeded.html.erb
index 6fb95be11..ca0dc9be0 100644
--- a/saas/app/views/cards/container/footer/saas/_storage_limit_exceeded.html.erb
+++ b/saas/app/views/cards/container/footer/saas/_storage_limit_exceeded.html.erb
@@ -1,7 +1,7 @@
-<div class="card-perma__notch card-perma__notch--bottom flex-column center">
-  <div class="pad-inline pad-block-half">
-    <strong>This account has used all <%= number_to_human_size(Account::StorageLimited::STORAGE_LIMIT) %> of free storage.</strong>
-    <div class="margin-block-start-quarter txt-small">
+<div class="card-perma__notch card-perma__notch--bottom">
+  <div class="card-perma__account-limit-message">
+    <strong>This account has used all the included free storage (<%= number_to_human_size(Account::StorageLimited::STORAGE_LIMIT) %>).</strong>
+    <div>
       <%= link_to "Self-host Fizzy", "https://github.com/basecamp/fizzy", target: "_blank" %> for unlimited storage.
     </div>
   </div>
diff --git a/saas/app/views/cards/container/footer/saas/_storage_limit_notice.html.erb b/saas/app/views/cards/container/footer/saas/_storage_limit_notice.html.erb
index 942041fb4..41bb987f0 100644
--- a/saas/app/views/cards/container/footer/saas/_storage_limit_notice.html.erb
+++ b/saas/app/views/cards/container/footer/saas/_storage_limit_notice.html.erb
@@ -1,5 +1,6 @@
 <% if Current.account.nearing_storage_limit? %>
-  <div class="full-width pad-inline center margin-block-half txt-small txt-ink-medium">
-    This account has used <%= number_to_human_size(Current.account.bytes_used) %> of <%= number_to_human_size(Account::StorageLimited::STORAGE_LIMIT) %> storage.
+  <div class="txt-small">
+    This account has used <strong><%= number_to_human_size(Current.account.bytes_used) %></strong> of <strong><%= number_to_human_size(Account::StorageLimited::STORAGE_LIMIT) %></strong> storage.
+    <div><%= link_to "Self-host Fizzy", "https://github.com/basecamp/fizzy", class: "txt-current txt-underline", target: "_blank" %> for unlimited storage.</div>
   </div>
 <% end %>