Account for new button sizes on mobile

app/assets/stylesheets/comments.css

@@ -4,7 +4,7 @@
     --comment-padding-block: var(--block-space-half);
     --comment-padding-inline: var(--inline-space-double);
     --comment-max: 70ch;
-    --reaction-size: 1.6875rem;
+    --reaction-size: 2rem;
 
     display: flex;
     flex-direction: column;
@@ -15,6 +15,10 @@
     @media (min-width: 160ch) {
       padding-inline: var(--tray-size);
     }
+
+    @media (min-width: 640px) {
+      --reaction-size: 1.6875rem;
+    }
   }
 
   .comments__subscribers {

app/assets/stylesheets/reactions.css

@@ -10,7 +10,7 @@
     flex-wrap: wrap;
     gap: var(--inline-space-half);
     inline-size: 100%;
-    margin-block-start: calc(var(--block-space-half) / 2);
+    margin-block-start: var(--block-space-half);
     margin-inline: calc(var(--column-gap) / -1);
 
     &:has([open]) {
@@ -44,6 +44,7 @@
   }
 
   .reactions__trigger {
+    --btn-size: var(--reaction-size);
     --btn-border-color: var(--reaction-border-color);
 
     img {
@@ -115,11 +116,13 @@
 
   /* Make the avatar and delete buttons fit nicely within the reaction */
   .reaction__avatar,
+  .reaction__avatar .avatar,
   .reaction__form-label,
   .reaction form {
-    block-size: var(--btn-size);
+    block-size: 100%;
   }
 
+
   .reaction__delete {
     display: none;