From 986c9d5a7fdc1a269e1a4bcf26ba283f7c2d2bb6 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro.celaya@hypothes.is>
Date: Tue, 5 Nov 2024 12:13:40 +0100
Subject: [PATCH] Make Select button main content grow

---
 src/components/input/Select.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/input/Select.tsx b/src/components/input/Select.tsx
index ff866859..0cf184c9 100644
--- a/src/components/input/Select.tsx
+++ b/src/components/input/Select.tsx
@@ -561,6 +561,8 @@ function SelectMain<T>({
           'focus-visible-ring transition-colors whitespace-nowrap',
           'w-full flex items-center justify-between gap-x-2 p-2',
           'bg-grey-0 disabled:bg-grey-1 disabled:text-grey-6',
+          // Buttons are center-aligned by default. Overwrite it.
+          'text-left',
           // Add inherited rounded corners so that the toggle is consistent with
           // the wrapper, which is the element rendering borders.
           // Using overflow-hidden in the parent is not an option here, because
@@ -586,7 +588,7 @@ function SelectMain<T>({
         }}
         data-testid="select-toggle-button"
       >
-        <div className="truncate">{buttonContent}</div>
+        <div className="truncate grow">{buttonContent}</div>
         <div className="text-grey-6">
           {listboxOpen ? <MenuCollapseIcon /> : <MenuExpandIcon />}
         </div>