Merge pull request basecamp#2689 from basecamp/mobile/tweak-card-perma-footer

Mobile / Tweak card perma footer

Author: adjogima

app/assets/stylesheets/card-perma.css

@@ -156,37 +156,74 @@
       @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;
+        min-inline-size: 0;
+        gap: calc(var(--meta-spacer-block) / 2);
+        display: flex;
+        flex-wrap: wrap;
 
         .card__meta-text {
           border: 0;
           padding: 0;
         }
 
-        .card__meta-text + .card__meta-text {
+        .card__meta-avatars--author {
+          --btn-size: 1.5em;
+
+          display: initial;
+          margin-inline-end: unset;
+          order: 3;
+        }
+
+        .card__meta-text--added {
+          inline-size: 100%;
+          order: 1;
+        }
+
+        .card__meta-text--author {
+          order: 2;
+        }
+
+        .card__meta-text--updated {
           border-block-start: var(--card-border);
-          margin-block-start: var(--meta-spacer-block);
+          inline-size: 100%;
+          margin-block-start: calc(var(--meta-spacer-block) * 0.5);
+          order: 4;
           padding-block-start: var(--meta-spacer-block);
         }
 
+        .card__meta-text--assignees {
+          margin-block-start: calc(var(--meta-spacer-block) * 3);
+          order: 6;
+          white-space: unset !important;
+        }
+
         .card__meta-avatars--assignees {
-          margin-inline: 0;
-          margin-block-start: var(--meta-spacer-block);
+          margin-inline: 0 var(--meta-spacer-inline);
+          margin-block-start: calc(var(--meta-spacer-block) * 3);
+          order: 5;
+
+          .avatar {
+            display: grid;
+          }
         }
 
-        .card__meta-avatars--author {
-          display: initial;
+        &:has(.card__meta-avatars--assignees .avatar) {
+          .card__meta-text--assignees {
+            order: 5;
+          }
+
+          .card__meta-avatars--assignees {
+            margin-block-start: var(--meta-spacer-block);
+            order: 6;
+          }
         }
+      }
+    }
 
-        .card__meta-avatars--assignees .avatar {
-          display: grid;
+    &:has(.card__closed) .card__meta {
+      @media (max-width: 639px) {
+        .card__meta-avatars--assignees {
+          display: none;
         }
       }
     }
@@ -252,10 +289,16 @@
       @media (max-width: 639px) {
         display: grid;
         font-size: var(--text-x-small);
+        gap: 1ch 0;
         grid-template-columns: 1fr auto;
         grid-template-areas:
           "meta bg-zoom"
           "meta reactions";
+
+        &:not(:has(.reaction)),
+        &:has(.card__background) {
+          column-gap: 2ch;
+        }
       }
     }
 

app/models/user/named.rb

@@ -20,6 +20,6 @@ def initials
   def familiar_name
     names = name.split
     return name if names.length <= 1
-    "#{names.first} #{names[1..].map { |n| "#{n[0]}." }.join}"
+    "#{names.first}\u00A0#{names[1..].map { |n| "#{n[0]}." }.join}"
   end
 end