From df408bfd032917bebb84be41d48e3f0cb6c83524 Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Tue, 8 Apr 2025 16:20:02 -0500
Subject: [PATCH] Use a number field, and improve focus styles

---
 app/assets/stylesheets/cards.css          | 12 ++++++++++++
 app/views/bubbles/boosts/_boosts.html.erb |  2 +-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/cards.css b/app/assets/stylesheets/cards.css
index d6352661b..a8d832bc1 100644
--- a/app/assets/stylesheets/cards.css
+++ b/app/assets/stylesheets/cards.css
@@ -468,9 +468,11 @@
   }
 
   .input.boost__input {
+    --hover-size: 0;
     --input-border-radius: 0;
     --input-border-size: 0;
     --input-padding: 0;
+    --outline-size: 0;
 
     color: inherit;
     font-size: inherit;
@@ -483,6 +485,16 @@
       field-sizing: content;
       max-inline-size: unset;
     }
+
+    &:focus {
+      background-color: var(--color-highlight);
+    }
+
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
   }
 
   .card__popped {
diff --git a/app/views/bubbles/boosts/_boosts.html.erb b/app/views/bubbles/boosts/_boosts.html.erb
index f6c440a82..ca12a1ed5 100644
--- a/app/views/bubbles/boosts/_boosts.html.erb
+++ b/app/views/bubbles/boosts/_boosts.html.erb
@@ -1,6 +1,6 @@
 <%= form_with url: bubble_boosts_path(bubble), class: "pad-inline flex align-center gap" do %>
   <span class="overflow-ellipsis">
-    <strong><%= text_field_tag :boost_count, bubble.boosts_count, min: 1, class: "boost__input input", autocomplete: "off" %></strong>
+    <strong><%= number_field_tag :boost_count, bubble.boosts_count, min: 1, class: "boost__input input", autocomplete: "off" %></strong>
     <span><%= bubble.boosts_count == 1 ? "boost" : "boosts" %></span>
   </span>
   <%= tag.button class: "btn", type: :submit, style: "font-size: 0.4em" do %>