From 0e064fbcd51785b8126b0664332f0d4d25a213aa Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Tue, 14 Oct 2025 17:13:19 -0500
Subject: [PATCH] Style code input

---
 app/assets/stylesheets/inputs.css            | 12 ++++++++++++
 app/views/sessions/magic_links/show.html.erb |  4 +---
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/app/assets/stylesheets/inputs.css b/app/assets/stylesheets/inputs.css
index e0ca57536..e9b453ad8 100644
--- a/app/assets/stylesheets/inputs.css
+++ b/app/assets/stylesheets/inputs.css
@@ -28,6 +28,18 @@
     &[readonly] {
       --focus-ring-size: 0;
     }
+
+    &[autocomplete='one-time-code'] {
+      --input-spacing: 0.5em;
+
+      font-family: var(--font-mono);
+      font-size: var(--text-large);
+      font-weight: 900;
+      inline-size: 18ch;
+      letter-spacing: 1ch;
+      min-inline-size: 18ch;
+      text-align: center;
+    }
   }
 
   .input--file {
diff --git a/app/views/sessions/magic_links/show.html.erb b/app/views/sessions/magic_links/show.html.erb
index e840ed5e8..d8c323cf5 100644
--- a/app/views/sessions/magic_links/show.html.erb
+++ b/app/views/sessions/magic_links/show.html.erb
@@ -17,9 +17,7 @@
 
   <%= form_with url: session_magic_link_path, method: :post, html: { class: "flex flex-column gap", data: { controller: token_list("auto-submit" => params[:code].present?)} } do |form| %>
     <div class="flex align-center gap">
-      <label class="flex align-center gap input input--actor">
-        <%= form.text_field :code, required: true, class: "input full-width txt-align-center", autofocus: true, autocomplete: "code", placeholder: "Enter the code", value: params[:code] %>
-      </label>
+      <%= form.text_field :code, required: true, class: "input center txt-align-enter", autofocus: true, "data-1p-ignore": true, autocomplete: "one-time-code", maxlength: "6", value: params[:code] %>
     </div>
 
     <button type="submit" id="log_in" class="btn btn--link center">