Fix button styles

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>

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',

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>
   );