Let's just use the class we already have

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;
     }

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>