Merge pull request #2524 from basecamp/mobile/fix-card-perma-footer

Mobile / Fix card perma footer

app/assets/stylesheets/card-perma.css

@@ -34,6 +34,26 @@
       }
     }
 
+    @media (max-width: 639px) {
+      &:has(.card__closed) {
+        padding-block-start: 2rem;
+      }
+
+      &:has(.reactions .reaction) {
+        .card__meta-avatars--assignees {
+          margin-inline-end: unset;
+        }
+      }
+
+      &:not(:has(.reactions .reaction)) {
+        &:has(.card__closed) {
+          .card__meta-text--assignees {
+            margin-inline-end: calc(var(--btn-size) + var(--meta-spacer-block));
+          }
+        }
+      }
+    }
+
     @media (max-width: 799px) {
       --half-btn-height: 1.25rem;
       --padding-inline: 1.5ch;
@@ -141,6 +161,43 @@
     .card__meta {
       grid-area: meta;
       margin-inline-end: auto;
+
+      @media (max-width: 639px) {
+        --meta-spacer-block: 0.75ch;
+
+        inline-size: 100%;
+        grid-template-areas:
+          "avatars-author text-added"
+          "avatars-author text-author"
+          "text-updated text-updated"
+          "text-assignees text-assignees"
+          "avatars-assignees avatars-assignees";
+        grid-template-columns: auto 1fr;
+
+        .card__meta-text {
+          border: 0;
+          padding: 0;
+        }
+
+        .card__meta-text + .card__meta-text {
+          border-block-start: var(--card-border);
+          margin-block-start: var(--meta-spacer-block);
+          padding-block-start: var(--meta-spacer-block);
+        }
+
+        .card__meta-avatars--assignees {
+          margin-inline: 0 calc(var(--btn-size) + var(--meta-spacer-block));
+          margin-block-start: var(--meta-spacer-block);
+        }
+
+        .card__meta-avatars--author {
+          display: initial;
+        }
+
+        .card__meta-avatars--assignees .avatar {
+          display: grid;
+        }
+      }
     }
 
     .card__stages {
@@ -195,6 +252,7 @@
 
       @media (max-width: 639px) {
         font-size: var(--text-x-small);
+        position: relative;
       }
     }
 
@@ -221,14 +279,24 @@
           inset: 0 calc(-1 * var(--card-padding-inline)) auto;
           position: absolute;
         }
+
+        @media (any-hover: none) {
+          --reaction-size: 2.25rem;
+        }
       }
 
       &:not(:has(.reaction)) {
-        position: static;
-
         .reactions__trigger {
           --btn-border-color: var(--color-ink-light);
         }
+
+        @media (max-width: 639px) {
+          inset-inline-end: 0;
+        }
+
+        @media (min-width: 640px) {
+          position: static;
+        }
       }
     }
 

app/assets/stylesheets/cards.css

@@ -381,6 +381,7 @@
     --stamp-color: oklch(var(--lch-green-medium) / 0.65);
 
     align-items: center;
+    backdrop-filter: blur(2px);
     background-color: color-mix(in srgb, var(--card-bg-color) 90%, transparent);
     border-radius: 0.2em;
     border: 0.5ch solid var(--stamp-color);
@@ -408,6 +409,12 @@
         }
       }
     }
+
+    @media (max-width: 639px) {
+      inset: auto calc(var(--card-padding-inline) * -0.5) 100% auto;
+      translate: 0 40%;
+      scale: 75%;
+    }
   }
 
   .card:has(.card__closed),

app/assets/stylesheets/reactions.css

@@ -86,6 +86,10 @@
       font-size: 0.6em;
       inline-size: auto;
     }
+
+    @media (any-hover: none) {
+      padding-inline-end: 0.12em;
+    }
   }
 
   .reaction--deleteable {
@@ -166,6 +170,11 @@
   .reaction__cancel-btn {
     --btn-size: 1.25rem;
     --icon-size: var(--btn-size);
+
+    @media (any-hover: none) {
+      --btn-size: 2rem;
+      --icon-size: 90%;
+    }
   }
 
   .reaction__submit-btn {
@@ -219,6 +228,12 @@
       &:hover {
         scale: 1.3;
       }
+
+      @media (any-hover: none) {
+        --btn-size: calc(1.6rem * 1.3);
+
+        font-size: 1.6rem;
+      }
     }
   }
 }

app/views/cards/show.html.erb

@@ -8,8 +8,8 @@
 <% content_for :header do %>
   <div class="header__actions header__actions--start">
     <%= link_back_to_board(@card.board) %>
-    <%= bridged_button_to_board(@card.board) %>
   </div>
+  <%= bridged_button_to_board(@card.board) %>
 <% end %>
 
 <%= turbo_stream_from @card %>