From 03ce900c2e8518fc354a4d82cf83277c2891d047 Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Fri, 9 Jan 2026 10:47:39 -0600
Subject: [PATCH] Tweak comment history button on mobile

---
 app/assets/stylesheets/buttons.css         |  4 ++--
 app/assets/stylesheets/comments.css        | 28 ++++++++++++++++------
 app/views/cards/comments/_comment.html.erb |  2 +-
 3 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/app/assets/stylesheets/buttons.css b/app/assets/stylesheets/buttons.css
index 64ea77611..ac897184f 100644
--- a/app/assets/stylesheets/buttons.css
+++ b/app/assets/stylesheets/buttons.css
@@ -110,7 +110,7 @@
 
     @media (max-width: 639px) {
       --btn-size: 3em;
-      --icon-size: 70%;
+      --icon-size: 75%;
     }
   }
 
@@ -119,7 +119,7 @@
     .btn--circle-mobile {
       --btn-size: 3em;
       --btn-padding: 0;
-      --icon-size: 70%;
+      --icon-size: 75%;
 
       aspect-ratio: 1;
       inline-size: var(--btn-size);
diff --git a/app/assets/stylesheets/comments.css b/app/assets/stylesheets/comments.css
index 2ae664dcd..a8956a98e 100644
--- a/app/assets/stylesheets/comments.css
+++ b/app/assets/stylesheets/comments.css
@@ -74,10 +74,6 @@
         .comments--system-expanded .comment-by-system & {
           --stripe-color: color-mix(in srgb, var(--card-color) 10%, var(--color-canvas));
         }
-
-        .comment__history {
-          background-color: var(--stripe-color);
-        }
       }
 
       .reactions {
@@ -136,11 +132,29 @@
     background-color: var(--color-ink-lightest);
   }
 
+  .comment__permalink-title {
+    color: currentColor;
+    opacity: 0.66;
+    text-decoration: none;
+    text-transform: capitalize;
+
+    @media (max-width: 639px) {
+      line-height: 1.5lh;
+    }
+  }
+
   .comment__history {
-    background-color: var(--color-ink-lightest);
+    background-color: transparent;
     display: none;
-    inset: calc(var(--comment-padding-inline) / 2.5) calc(var(--comment-padding-inline) / 1.5) auto auto;    margin-inline-end: calc(var(--comment-padding-inline) / -2.5);
+    inset: var(--comment-padding-block) var(--comment-padding-block) auto auto;
+    translate: 2px -2px; /* Align baseline with time stamp */
     position: absolute;
+
+    @media (any-hover: hover) {
+      &:hover {
+        background-color: var(--stripe-color);
+      }
+    }
   }
 
   .comment-by-system {
@@ -158,7 +172,7 @@
     display: contents;
 
     .comment__history {
-      display: grid;
+      display: inline-flex;
     }
   }
 
diff --git a/app/views/cards/comments/_comment.html.erb b/app/views/cards/comments/_comment.html.erb
index d693761ea..199bde108 100644
--- a/app/views/cards/comments/_comment.html.erb
+++ b/app/views/cards/comments/_comment.html.erb
@@ -14,7 +14,7 @@
               <%= link_to comment.creator.name, comment.creator, class: "txt-ink btn btn--plain fill-transparent", data: { turbo_frame: "_top" } %>
             </strong>
 
-            <%= link_to comment, class: "txt-undecorated txt-ink translucent txt-normal txt-capitalize", data: { turbo_frame: "_top" } do %>
+            <%= link_to comment, class: "comment__permalink-title", data: { turbo_frame: "_top" } do %>
               <%= local_datetime_tag comment.created_at, style: :agoorweekday %>,
               <%= local_datetime_tag comment.created_at, style: :time %>
             <% end %>