diff --git a/app/assets/stylesheets/comments.css b/app/assets/stylesheets/comments.css
index c3dbb7d74..3c54a65f9 100644
--- a/app/assets/stylesheets/comments.css
+++ b/app/assets/stylesheets/comments.css
@@ -36,7 +36,7 @@
       padding: var(--comment-padding-block) 0 0;
     }
 
-    .comment--system & {
+    .system-comment & {
       --comment-padding-block: var(--block-space-half);
 
       text-align: center;
@@ -72,7 +72,7 @@
           var(--stripe-color) 1px 10px);
         padding-inline: var(--comment-padding-inline);
 
-        .comments--system-expanded .comment--system & {
+        .comments--system-expanded .system-comment & {
           --stripe-color: color-mix(in srgb, var(--card-color) 10%, var(--color-canvas));
         }
 
@@ -144,7 +144,7 @@
     position: absolute;
   }
 
-  .comment--system {
+  .system-comment {
     display: none;
     transition: var(--dialog-duration) allow-discrete;
     transition-property: display;
@@ -155,7 +155,7 @@
   }
 
   /* Show the last system comment */
-  :nth-last-child(1 of .comment--system) {
+  :nth-last-child(1 of .system-comment) {
     display: contents;
 
     .comment__history {
@@ -164,7 +164,7 @@
   }
 
   /* Hide the "Show history" button if there's only one system comment */
-  :nth-child(1 of .comment--system) {
+  :nth-child(1 of .system-comment) {
     .comment__history {
       display: none;
     }
diff --git a/app/views/cards/comments/_comment.html.erb b/app/views/cards/comments/_comment.html.erb
index 2f8a120a0..a648ffb51 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--system": comment.creator.system?] do %>
+  <%= turbo_frame_tag comment, :container, class: { "system-comment": 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">
+    <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>