From f6288ca02607708122b72daba61cca0239d0b498 Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Tue, 8 Apr 2025 16:19:40 -0500
Subject: [PATCH 1/3] Fix boosting via number input

- Regression in c06802856eeac15a83177a5396a7597ba47b7272 which moved text field outside of form element
---
 app/views/bubbles/boosts/_boosts.html.erb | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/app/views/bubbles/boosts/_boosts.html.erb b/app/views/bubbles/boosts/_boosts.html.erb
index b741a89fb..f6c440a82 100644
--- a/app/views/bubbles/boosts/_boosts.html.erb
+++ b/app/views/bubbles/boosts/_boosts.html.erb
@@ -1,11 +1,10 @@
-<div class="pad-inline flex align-center gap">
+<%= 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>
     <span><%= bubble.boosts_count == 1 ? "boost" : "boosts" %></span>
   </span>
-
-  <%= button_to bubble_boosts_path(bubble), class: "btn", type: :submit, style: "font-size: 0.5em" do %>
+  <%= tag.button class: "btn", type: :submit, style: "font-size: 0.4em" do %>
     <%= icon_tag "add" %>
     <span class="for-screen-reader">Boost</span>
   <% end %>
-</div>
+<% end %>
\ No newline at end of file

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 2/3] 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 %>

From d100d93b2a8f18b2a15b16d506d6e51dbbd47955 Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Tue, 8 Apr 2025 16:22:38 -0500
Subject: [PATCH 3/3] Safari sure loves outlines

---
 app/assets/stylesheets/cards.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/assets/stylesheets/cards.css b/app/assets/stylesheets/cards.css
index a8d832bc1..a91eafae7 100644
--- a/app/assets/stylesheets/cards.css
+++ b/app/assets/stylesheets/cards.css
@@ -480,6 +480,7 @@
     inline-size: min-content;
     max-inline-size: 3ch;
     min-inline-size: 1ch;
+    outline: none;
 
     @supports (field-sizing: content) {
       field-sizing: content;