From 1190ae101d3035702f5fefbbfc0cc93a5dfae34b Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Tue, 11 Nov 2025 14:14:49 -0600
Subject: [PATCH] Ensure sign-in screens adapt on mobile

---
 app/assets/stylesheets/panels.css   | 6 +++++-
 app/views/sessions/_footer.html.erb | 2 +-
 app/views/sessions/new.html.erb     | 2 +-
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/app/assets/stylesheets/panels.css b/app/assets/stylesheets/panels.css
index 9b0345096..d57e3aa29 100644
--- a/app/assets/stylesheets/panels.css
+++ b/app/assets/stylesheets/panels.css
@@ -6,7 +6,11 @@
     color: var(--color-ink);
     inline-size: var(--panel-size, 60ch);
     max-inline-size: 100%;
-    padding: var(--panel-padding, calc(var(--block-space) * 2));
+    padding: var(--panel-padding, var(--block-space));
+
+    @media (min-width: 640px) {
+      padding: var(--panel-padding, var(--block-space-double));
+    }
   }
 
   .panel--centered {
diff --git a/app/views/sessions/_footer.html.erb b/app/views/sessions/_footer.html.erb
index f0b4fe55a..6ad8f5972 100644
--- a/app/views/sessions/_footer.html.erb
+++ b/app/views/sessions/_footer.html.erb
@@ -1,4 +1,4 @@
-<div class="txt-align-center center margin-block-double txt-subtle txt-small">
+<div class="pad-inline txt-align-center center margin-block-double txt-subtle txt-small">
   <strong><%= link_to "Fizzy", "https://www.fizzy.do", class: "txt-subtle" %></strong> is designed, built, and backed by <strong class="txt-nowrap"><%= icon_tag "37signals", class: "v-align-middle" %> <a href="https://37signals.com" target="_blank" class="txt-subtle">37signals</a></strong>.
   Need help? <%= mail_to "support@fizzy.do", "Send us an email", class: "txt-link" %>
 </div>
\ No newline at end of file
diff --git a/app/views/sessions/new.html.erb b/app/views/sessions/new.html.erb
index b4d0ae45b..f90fe2fb3 100644
--- a/app/views/sessions/new.html.erb
+++ b/app/views/sessions/new.html.erb
@@ -1,6 +1,6 @@
 <% @page_title = "Enter your email" %>
 
-<div class="panel panel--centered flex flex-column gap-half" style="--panel-size: 65ch;">
+<div class="panel panel--centered flex flex-column gap-half">
   <h1 class="txt-x-large font-weight-black margin-block-end">Let’s get you in to Fizzy</h1>
 
   <%= form_with url: session_path, class: "flex flex-column gap txt-medium" do |form| %>