From 6e568aa8b2b1756d22f4cf761289135c6e88c378 Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Wed, 17 Dec 2025 11:31:33 -0600
Subject: [PATCH] Fix new card buttons on mobile

---
 app/assets/stylesheets/card-perma.css             | 13 +++++++++++++
 app/views/cards/container/footer/_create.html.erb |  2 +-
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/card-perma.css b/app/assets/stylesheets/card-perma.css
index 622c9c198..59a80a32a 100644
--- a/app/assets/stylesheets/card-perma.css
+++ b/app/assets/stylesheets/card-perma.css
@@ -299,6 +299,19 @@
     }
   }
 
+  .card-perma__notch-new-card-buttons {
+    display: flex;
+    gap: var(--inline-space-half);
+
+    @media (max-width: 479px) {
+      flex-direction: column;
+
+      .btn {
+        inline-size: 100%;
+      }
+    }
+  }
+
   .card-perma__closure-message {
     color: var(--card-color);
   }
diff --git a/app/views/cards/container/footer/_create.html.erb b/app/views/cards/container/footer/_create.html.erb
index 3e89952df..8b5062fdd 100644
--- a/app/views/cards/container/footer/_create.html.erb
+++ b/app/views/cards/container/footer/_create.html.erb
@@ -1,5 +1,5 @@
 <div class="card-perma__notch card-perma__notch--bottom flex-column">
-  <div class="flex gap-half">
+  <div class="card-perma__notch-new-card-buttons">
     <%= button_to card_publish_path(card), name: "creation_type", value: "add", class: "btn",
           title: "Create card (#{ hotkey_label(["ctrl", "enter"]) })",
           form: { data: { controller: "form" } },