From 035c5f97a1743e7a8d25908f4c89606422a76cdd Mon Sep 17 00:00:00 2001
From: Alexander Zaytsev <nqst@users.noreply.github.com>
Date: Wed, 17 Dec 2025 10:09:35 +0100
Subject: [PATCH 1/6] Use simpler selectors to target system comments

---
 app/assets/stylesheets/comments.css        | 43 ++++++++++++----------
 app/views/cards/comments/_comment.html.erb |  2 +-
 2 files changed, 25 insertions(+), 20 deletions(-)

diff --git a/app/assets/stylesheets/comments.css b/app/assets/stylesheets/comments.css
index 45c98fb13..7a434716e 100644
--- a/app/assets/stylesheets/comments.css
+++ b/app/assets/stylesheets/comments.css
@@ -96,7 +96,6 @@
   .comment--system {
     --comment-padding-block: var(--block-space-half);
 
-    display: none;
     max-inline-size: var(--comment-max);
     text-align: center;
     transition: var(--dialog-duration) allow-discrete;
@@ -106,24 +105,6 @@
       display: flex;
     }
 
-    &:nth-last-child(1 of &):not(:has(~ * &) *):not(:has(~ &) *):not(:has(~ * &)):not(:has(&)) {
-      /* This unholy selector targets the last system comment in the document */
-      /* Hat-tip, https://css-tip.com/last-element-dom/ */
-      display: flex;
-
-      .comment__history  {
-        display: grid;
-      }
-    }
-
-    &:nth-child(1 of &):not(:has(&) ~ * *):not(:has(&) ~ *):not(& ~ * *):not(& *) {
-      /* Targets the first system comment in the document to effectively */
-      /* hide the "Show history" button if there's only one entry */
-      .comment__history  {
-        display: none;
-      }
-    }
-
     &::before {
       /* Make up space for lack of avatar */
       content: "";
@@ -176,4 +157,28 @@
       display: none !important;
     }
   }
+
+  .comment-wrapper--system {
+    display: none;
+
+    .comments--system-expanded & {
+      display: flex;
+    }
+  }
+
+  /* Show the last system comment */
+  :nth-last-child(1 of .comment-wrapper--system) {
+    display: flex;
+
+    .comment__history {
+      display: grid;
+    }
+  }
+
+  /* Hide the "Show history" button if there's only one system comment */
+  :nth-child(1 of .comment-wrapper--system) {
+    .comment__history {
+      display: none;
+    }
+  }
 }
diff --git a/app/views/cards/comments/_comment.html.erb b/app/views/cards/comments/_comment.html.erb
index de2b94c0d..c7f0a2480 100644
--- a/app/views/cards/comments/_comment.html.erb
+++ b/app/views/cards/comments/_comment.html.erb
@@ -1,6 +1,6 @@
 <% cache comment do %>
   <%# Helper Dependency Updated: avatar_image_tag 2025-12-15 %>
-  <%= turbo_frame_tag comment, :container do %>
+  <%= turbo_frame_tag comment, :container, class: ["comment-wrapper", { "comment-wrapper--system": comment.creator.system? }] do %>
     <%# Cache bump 2025-12-14: action text attachment rendering changed for lightbox -%>
     <div id="<%= dom_id(comment) %>" data-creator-id="<%= comment.creator_id %>"  class="comment align-start full-width <%= "comment--system" if comment.creator.system? %>">
       <figure class="comment__avatar flex-item-no-shrink" aria-hidden="true">

From 56bf5289c38a78666f8a4bf35f22005f7283e5dc Mon Sep 17 00:00:00 2001
From: Alexander Zaytsev <nqst@users.noreply.github.com>
Date: Wed, 17 Dec 2025 10:20:16 +0100
Subject: [PATCH 2/6] Use `display: contents` instead of `flex`

---
 app/assets/stylesheets/comments.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/assets/stylesheets/comments.css b/app/assets/stylesheets/comments.css
index 7a434716e..45b5885f9 100644
--- a/app/assets/stylesheets/comments.css
+++ b/app/assets/stylesheets/comments.css
@@ -162,13 +162,13 @@
     display: none;
 
     .comments--system-expanded & {
-      display: flex;
+      display: contents;
     }
   }
 
   /* Show the last system comment */
   :nth-last-child(1 of .comment-wrapper--system) {
-    display: flex;
+    display: contents;
 
     .comment__history {
       display: grid;

From b0a1b370a88e49ce0f20cfa4c10d4934102087b3 Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Wed, 17 Dec 2025 19:55:50 -0600
Subject: [PATCH 3/6] Move transition to wrapper element

---
 app/assets/stylesheets/comments.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/assets/stylesheets/comments.css b/app/assets/stylesheets/comments.css
index 45b5885f9..af938c6a0 100644
--- a/app/assets/stylesheets/comments.css
+++ b/app/assets/stylesheets/comments.css
@@ -98,8 +98,6 @@
 
     max-inline-size: var(--comment-max);
     text-align: center;
-    transition: var(--dialog-duration) allow-discrete;
-    transition-property: display;
 
     .comments--system-expanded & {
       display: flex;
@@ -160,6 +158,8 @@
 
   .comment-wrapper--system {
     display: none;
+    transition: var(--dialog-duration) allow-discrete;
+    transition-property: display;
 
     .comments--system-expanded & {
       display: contents;

From fe89debf94cc00ad52966d8ed372ad92ea05afef Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Wed, 17 Dec 2025 19:57:19 -0600
Subject: [PATCH 4/6] No longer used

---
 app/assets/stylesheets/comments.css | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/app/assets/stylesheets/comments.css b/app/assets/stylesheets/comments.css
index af938c6a0..5b368bafa 100644
--- a/app/assets/stylesheets/comments.css
+++ b/app/assets/stylesheets/comments.css
@@ -99,10 +99,6 @@
     max-inline-size: var(--comment-max);
     text-align: center;
 
-    .comments--system-expanded & {
-      display: flex;
-    }
-
     &::before {
       /* Make up space for lack of avatar */
       content: "";

From ae5cb096f91e9f8948acc3c4b36adae9defdb264 Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Wed, 17 Dec 2025 20:06:38 -0600
Subject: [PATCH 5/6] Let's just use the class we already have

---
 app/assets/stylesheets/comments.css        | 122 ++++++++++-----------
 app/views/cards/comments/_comment.html.erb |   4 +-
 2 files changed, 63 insertions(+), 63 deletions(-)

diff --git a/app/assets/stylesheets/comments.css b/app/assets/stylesheets/comments.css
index 5b368bafa..1d070a992 100644
--- a/app/assets/stylesheets/comments.css
+++ b/app/assets/stylesheets/comments.css
@@ -35,6 +35,65 @@
     .house-md-content {
       padding: var(--comment-padding-block) 0 0;
     }
+
+    .comment--system & {
+      --comment-padding-block: var(--block-space-half);
+
+      max-inline-size: var(--comment-max);
+      text-align: center;
+
+      &::before {
+        /* Make up space for lack of avatar */
+        content: "";
+        display: flex;
+        inline-size: calc(var(--comment-padding-inline) * 0.75);
+      }
+
+      .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--system & {
+          --stripe-color: color-mix(in srgb, var(--card-color) 10%, var(--color-canvas));
+        }
+
+        .comment__history {
+          background-color: var(--stripe-color);
+        }
+      }
+
+      .reactions {
+        display: none !important;
+      }
+    }
   }
 
   .comment__author {
@@ -94,65 +153,6 @@
   }
 
   .comment--system {
-    --comment-padding-block: var(--block-space-half);
-
-    max-inline-size: var(--comment-max);
-    text-align: center;
-
-    &::before {
-      /* Make up space for lack of avatar */
-      content: "";
-      display: flex;
-      inline-size: calc(var(--comment-padding-inline) * 0.75);
-    }
-
-    .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--system & {
-        --stripe-color: color-mix(in srgb, var(--card-color) 10%, var(--color-canvas));
-      }
-
-      .comment__history {
-        background-color: var(--stripe-color);
-      }
-    }
-
-    .reactions {
-      display: none !important;
-    }
-  }
-
-  .comment-wrapper--system {
     display: none;
     transition: var(--dialog-duration) allow-discrete;
     transition-property: display;
@@ -163,7 +163,7 @@
   }
 
   /* Show the last system comment */
-  :nth-last-child(1 of .comment-wrapper--system) {
+  :nth-last-child(1 of .comment--system) {
     display: contents;
 
     .comment__history {
@@ -172,7 +172,7 @@
   }
 
   /* Hide the "Show history" button if there's only one system comment */
-  :nth-child(1 of .comment-wrapper--system) {
+  :nth-child(1 of .comment--system) {
     .comment__history {
       display: none;
     }
diff --git a/app/views/cards/comments/_comment.html.erb b/app/views/cards/comments/_comment.html.erb
index c7f0a2480..2f8a120a0 100644
--- a/app/views/cards/comments/_comment.html.erb
+++ b/app/views/cards/comments/_comment.html.erb
@@ -1,8 +1,8 @@
 <% cache comment do %>
   <%# Helper Dependency Updated: avatar_image_tag 2025-12-15 %>
-  <%= turbo_frame_tag comment, :container, class: ["comment-wrapper", { "comment-wrapper--system": comment.creator.system? }] do %>
+  <%= turbo_frame_tag comment, :container, class: ["comment--system": comment.creator.system?] do %>
     <%# Cache bump 2025-12-14: action text attachment rendering changed for lightbox -%>
-    <div id="<%= dom_id(comment) %>" data-creator-id="<%= comment.creator_id %>"  class="comment align-start full-width <%= "comment--system" if comment.creator.system? %>">
+    <div id="<%= dom_id(comment) %>" data-creator-id="<%= comment.creator_id %>"  class="comment align-start full-width">
       <figure class="comment__avatar flex-item-no-shrink" aria-hidden="true">
         <%= avatar_tag comment.creator, hidden_for_screen_reader: true %>
       </figure>

From 7c92d48d8a8b602bdc162757b1140f330eb2c85a Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Wed, 17 Dec 2025 20:10:06 -0600
Subject: [PATCH 6/6] Style

---
 app/assets/stylesheets/comments.css | 14 +++-----------
 1 file changed, 3 insertions(+), 11 deletions(-)

diff --git a/app/assets/stylesheets/comments.css b/app/assets/stylesheets/comments.css
index 1d070a992..9e5094d15 100644
--- a/app/assets/stylesheets/comments.css
+++ b/app/assets/stylesheets/comments.css
@@ -54,17 +54,9 @@
       }
 
       .comment__author {
-        a {
-          margin: 0 auto;
-        }
-
-        h3 {
-          margin-inline: auto;
-        }
-
-        strong {
-          display: none;
-        }
+        a { margin: 0 auto; }
+        h3 { margin-inline: auto; }
+        strong { display: none; }
       }
 
       .comment__body {