From 9d4f4bef5dccac9bbbb990f654d582d965608c87 Mon Sep 17 00:00:00 2001
From: Gregory Schier <gschier1990@gmail.com>
Date: Mon, 30 Oct 2023 07:27:27 -0700
Subject: [PATCH] Fix button styles

---
 src-web/components/core/Button.tsx     | 4 +++-
 src-web/components/core/IconButton.tsx | 1 +
 src-web/components/core/PairEditor.tsx | 2 +-
 3 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src-web/components/core/Button.tsx b/src-web/components/core/Button.tsx
index af38b654..9d64b4b4 100644
--- a/src-web/components/core/Button.tsx
+++ b/src-web/components/core/Button.tsx
@@ -15,6 +15,7 @@ const colorStyles = {
 };
 
 export type ButtonProps = HTMLAttributes<HTMLButtonElement> & {
+  innerClassName?: string;
   color?: keyof typeof colorStyles;
   isLoading?: boolean;
   size?: 'sm' | 'md' | 'xs';
@@ -32,6 +33,7 @@ const _Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
   {
     isLoading,
     className,
+    innerClassName,
     children,
     forDropdown,
     color,
@@ -70,7 +72,7 @@ const _Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
       ) : leftSlot ? (
         <div className="mr-1">{leftSlot}</div>
       ) : null}
-      <div className="max-w-[15em] truncate">{children}</div>
+      <div className={classNames('max-w-[15em] truncate w-full text-left', innerClassName)}>{children}</div>
       {rightSlot && <div className="ml-1">{rightSlot}</div>}
       {forDropdown && <Icon icon="chevronDown" size={size} className="ml-1 -mr-1" />}
     </button>
diff --git a/src-web/components/core/IconButton.tsx b/src-web/components/core/IconButton.tsx
index b9b9994b..542dcd52 100644
--- a/src-web/components/core/IconButton.tsx
+++ b/src-web/components/core/IconButton.tsx
@@ -45,6 +45,7 @@ export const IconButton = forwardRef<HTMLButtonElement, Props>(function IconButt
       disabled={icon === 'empty'}
       tabIndex={tabIndex ?? icon === 'empty' ? -1 : undefined}
       onClick={handleClick}
+      innerClassName="flex items-center justify-center"
       className={classNames(
         className,
         'flex-shrink-0 text-gray-700 hover:text-gray-1000',
diff --git a/src-web/components/core/PairEditor.tsx b/src-web/components/core/PairEditor.tsx
index 60ee71ed..6197c5bc 100644
--- a/src-web/components/core/PairEditor.tsx
+++ b/src-web/components/core/PairEditor.tsx
@@ -379,7 +379,7 @@ const FormRow = memo(function FormRow({
         size="sm"
         title="Delete header"
         onClick={showDelete ? handleDelete : undefined}
-        className="ml-0.5 !opacity-0 group-hover:!opacity-100 focus-visible:!opacity-100"
+        className="ml-0.5 group-hover:!opacity-100 focus-visible:!opacity-100"
       />
     </div>
   );