Merge pull request #621 from basecamp/bubble-column-fix

Fix the space reserved for bubbles in card columns

app/assets/stylesheets/card-columns.css

@@ -57,13 +57,6 @@
       z-index: 3;
     }
 
-    &:first-child {
-      @media (min-width: 640px) {
-        border-inline-end: 1px solid var(--color-ink-lighter);
-        padding-inline: var(--reserved-bubble-space) var(--cards-gap);
-      }
-    }
-
     @media (max-width: 639px) {
       padding-block-end: calc(var(--cards-gap) * 2);
       padding-inline-start: var(--reserved-bubble-space);
@@ -155,7 +148,10 @@
   /* ------------------------------------------------------------------------ */
 
   .cards--considering {
-    padding-inline-start: calc(var(--cards-gap) / 2);
+    @media (min-width: 640px) {
+      border-inline-end: 1px solid var(--color-ink-lighter);
+      padding-inline: var(--reserved-bubble-space) var(--cards-gap);
+    }
 
     .card {
       --text-xx-large: 1.6em;
@@ -213,13 +209,20 @@
   /* Doing
   /* ------------------------------------------------------------------------ */
 
-  @media (max-width: 639px) {
-    .cards--doing:before {
-      background: var(--gradient-border);
-      block-size: 1px;
-      content: "";
-      inset: 0 0 auto;
-      position: absolute;
+  .cards--doing {
+    @media (min-width: 640px) {
+      /* border-inline-end: 1px solid var(--color-ink-lighter); */
+      padding-inline: var(--cards-gap) var(--reserved-bubble-space);
+    }
+
+    @media (max-width: 639px) {
+      &::before {
+        background: var(--gradient-border);
+        block-size: 1px;
+        content: "";
+        inset: 0 0 auto;
+        position: absolute;
+      }
     }
   }
 
@@ -309,11 +312,4 @@
       }
     }
   }
-
-  /* Doing
-  /* ------------------------------------------------------------------------ */
-
-  .cards--doing {
-    padding-inline-end: calc(var(--cards-gap) / 2);
-  }
 }