From 4beeb6048442d4a549a56dc9c230cb54fe4c3e57 Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Wed, 11 Jun 2025 11:42:36 -0500
Subject: [PATCH] Closing cards on mobile

---
 app/assets/stylesheets/card-columns.css   | 57 +++++++++++------------
 app/assets/stylesheets/cards.css          |  2 +
 app/views/cards/display/_preview.html.erb |  2 +-
 3 files changed, 30 insertions(+), 31 deletions(-)

diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css
index 15e8f03b0..3e6bbe5ab 100644
--- a/app/assets/stylesheets/card-columns.css
+++ b/app/assets/stylesheets/card-columns.css
@@ -1,6 +1,6 @@
 @layer components {
   /* Coluns
-  /* -------------------------------------------------------------------------- */
+  /* ------------------------------------------------------------------------ */
 
   /* Card contents are resized via container queries. We're using #main here as
      the primary container so all cards have the same container reference */
@@ -12,11 +12,12 @@
   .card-columns {
     --bubble-size: 4rem;
     --bubble-gap: 0.5rem;
+    --reserved-bubble-space: calc(var(--bubble-size) + var(--bubble-gap));
 
     display: grid;
     grid-template-columns: repeat(2, 50%);
     margin: auto;
-    max-inline-size: calc(100% - (var(--bubble-size) + var(--bubble-gap)) * 2);
+    max-inline-size: 100%;
     position: relative;
 
     &:before {
@@ -28,39 +29,29 @@
       inset: 0 -0.6em 100% -0.6em;
       position: absolute;
     }
-
-    .cards:first-child {
-      padding-inline-end: var(--cards-gap);
-      position: relative;
-
-      &:after {
-        background: linear-gradient(var(--color-canvas), var(--color-ink-lighter) 1%, var(--color-ink-lighter) 99%, var(--color-canvas));
-        block-size: calc(100% + 1.2em);
-        content: "";
-        display: block;
-        inline-size: 1px;
-        inset: -0.6em 0 -0.6em 100%;
-        position: absolute;
-      }
-    }
-
-    .cards:last-child {
-      padding-inline-start: var(--cards-gap);
-    }
   }
 
   /* Cards
-  /* -------------------------------------------------------------------------- */
+  /* ------------------------------------------------------------------------ */
 
   .cards {
-    --cards-gap: 2cqi;
+    --cards-gap: min(2cqi, 1rem);
 
     align-items: center;
     display: flex;
     flex-direction: column;
     gap: var(--cards-gap);
     justify-content: start;
-    padding-block: calc(var(--cards-gap) * 0.75);
+    padding: var(--cards-gap);
+
+    &:first-child {
+      border-inline-end: 1px solid var(--color-ink-lighter);
+      padding-inline-start: var(--reserved-bubble-space);
+    }
+
+    &:last-child {
+      padding-inline-end: var(--reserved-bubble-space);
+    }
 
     .card {
       --block-space: 1em;
@@ -90,7 +81,7 @@
         .workflow-stage:not(.workflow-stage--current) {
           opacity: 0;
           transition: opacity 0.2s ease-in-out;
-        
+
           @media (any-hover: hover) {
             .card:hover & {
               opacity: 1;
@@ -98,7 +89,7 @@
           }
         }
       }
-  
+
       @media (any-hover: hover) {
         .card:hover & {
           img:not([src=""]) {
@@ -176,7 +167,7 @@
   }
 
   /* Closed
-  /* -------------------------------------------------------------------------- */
+  /* ------------------------------------------------------------------------ */
 
   .cards--closed {
     justify-content: center;
@@ -196,13 +187,19 @@
       position: absolute;
     }
 
-    .card {
-      inline-size: calc((100% - var(--cards-gap) * 2) / 3);
+    @media (max-width: 639px) {
+      flex-direction: column;
+    }
 
-      @media (max-width: 960px) {
+    .card {
+      @media (min-width: 640px) {
         inline-size: calc((100% - var(--cards-gap)) / 2);
       }
 
+      @media (min-width: 960px) {
+        inline-size: calc((100% - var(--cards-gap) * 2) / 3);
+      }
+
       &:nth-of-type(7) {
         margin-block-start: var(--cards-gap);
       }
diff --git a/app/assets/stylesheets/cards.css b/app/assets/stylesheets/cards.css
index 01f4883ba..7981cf132 100644
--- a/app/assets/stylesheets/cards.css
+++ b/app/assets/stylesheets/cards.css
@@ -66,7 +66,9 @@
     gap: var(--inline-space-half);
     margin-block-start: calc(-1 * var(--card-padding-block));
     margin-inline-start: calc(-1 * var(--card-padding-inline));
+    max-inline-size: 100%;
     min-inline-size: 0;
+    overflow: hidden;
   }
 
   .card__collection {
diff --git a/app/views/cards/display/_preview.html.erb b/app/views/cards/display/_preview.html.erb
index 4590b5e99..40f34c9ed 100644
--- a/app/views/cards/display/_preview.html.erb
+++ b/app/views/cards/display/_preview.html.erb
@@ -1,7 +1,7 @@
 <% cache cacheable_preview_parts_for(card) do %>
   <%= card_article_tag card, class: "card" do %>
     <div class="flex gap">
-      <div class="flex flex-column flex-item-grow">
+      <div class="flex flex-column flex-item-grow max-inline-size">
         <header class="card__header">
           <%= render "cards/display/preview/collection", card: card %>
           <%= render "cards/display/preview/tags", card: card %>