From bb4ee3cb653ff1f3a48ba4e6c3bc845e4bf94285 Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Tue, 17 Dec 2024 16:08:01 -0600
Subject: [PATCH] Fix for Safari which doesn't support `field-sizing: content`

---
 app/assets/stylesheets/bubbles.css | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/bubbles.css b/app/assets/stylesheets/bubbles.css
index fc3be96b7..91b65091e 100644
--- a/app/assets/stylesheets/bubbles.css
+++ b/app/assets/stylesheets/bubbles.css
@@ -81,6 +81,7 @@
     border-radius: var(--bubble-shape);
     display: flex;
     font-size: 6cqi;
+    inline-size: min-content;
     inset: 70cqi 7cqi auto auto;
     min-inline-size: 4.5ch;
     padding: 0;
@@ -104,10 +105,13 @@
 
     .boost__input {
       color: var(--bubble-color);
-      field-sizing: content;
       font-weight: 800;
       padding: 0;
       text-align: center;
+
+      @supports (field-sizing: content) {
+        field-sizing: content;
+      }
     }
 
     &.boosting {