Merge pull request #2594 from basecamp/mobile/fix-card-background-image

Mobile / Fix card background image

app/assets/stylesheets/card-perma.css

@@ -36,20 +36,10 @@
 
     @media (max-width: 639px) {
       &:has(.card__closed) {
-        padding-block-start: 2rem;
-      }
+        padding-block-start: 4.5rem;
 
-      &: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));
-          }
+        .card-perma__bg {
+          box-shadow: 0 -2rem 0 0 var(--color-container);
         }
       }
     }
@@ -110,6 +100,7 @@
       @media (max-width: 639px) {
         flex-direction: column;
         padding-block: var(--card-padding-block) calc(var(--card-padding-block) * 1.5);
+        position: static;
       }
     }
 
@@ -186,7 +177,7 @@
         }
 
         .card__meta-avatars--assignees {
-          margin-inline: 0 calc(var(--btn-size) + var(--meta-spacer-block));
+          margin-inline: 0;
           margin-block-start: var(--meta-spacer-block);
         }
 
@@ -232,6 +223,14 @@
       }
     }
 
+    .card__closed {
+      @media (max-width: 639px) {
+        inset: auto 0 100% auto;
+        translate: 0 30%;
+        scale: 75%;
+      }
+    }
+
     .card__footer {
       --btn-size: 2.5rem;
 
@@ -251,8 +250,12 @@
       }
 
       @media (max-width: 639px) {
+        display: grid;
         font-size: var(--text-x-small);
-        position: relative;
+        grid-template-columns: 1fr auto;
+        grid-template-areas:
+          "meta bg-zoom"
+          "meta reactions";
       }
     }
 
@@ -286,17 +289,11 @@
       }
 
       &:not(:has(.reaction)) {
+        margin: 0;
+
         .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

@@ -409,12 +409,6 @@
         }
       }
     }
-
-    @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/comments.css

@@ -84,6 +84,17 @@
     .reactions {
       margin-block-start: var(--block-space-half);
       margin-inline: calc(var(--column-gap) / -1);
+
+      &:not(:has(.reaction)) {
+        inset-block-end: var(--comment-padding-block);
+        inset-inline-end: calc(var(--comment-padding-inline) / 2);
+        margin: 0;
+        position: absolute;
+
+        @media (max-width: 640px) {
+          inset-inline-end: calc(var(--comment-padding-inline) / 3);
+        }
+      }
     }
   }
 

app/assets/stylesheets/reactions.css

@@ -17,14 +17,6 @@
 
     &:not(:has(.reaction)) {
       inline-size: auto;
-      inset-block-end: var(--comment-padding-block);
-      inset-inline-end: calc(var(--comment-padding-inline) / 2);
-      margin: 0;
-      position: absolute;
-
-      @media (max-width: 640px) {
-        inset-inline-end: calc(var(--comment-padding-inline) / 3);
-      }
 
       .reactions__list {
         display: none;