From c2d581225b8ed4549a48f412762dfebd416b5f3e Mon Sep 17 00:00:00 2001 From: simoleo89 Date: Wed, 20 May 2026 22:07:36 +0200 Subject: [PATCH] fix(button): align icon + text by forcing inline-flex display MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The Button base class string declared `inline-block`, even though the component renders through which passes display="flex". Both `inline-block` (from the Button base class) and `flex` (from Flex) ended up as classes on the same element. Tailwind v4's emitted stylesheet orders display utilities in source order — the unfortunate result on this build was that the icon kept rendering at the baseline (top-left of the line box) while the text settled centered via text-center, i.e. inline-block layout was winning. Resolve the ambiguity by passing display="inline-flex" to Flex explicitly. Now there's only ONE display utility on the element (inline-flex), and Flex's center=true still adds items-center + justify-center. Strip the now-conflicting `inline-block` / `align-middle` from the Button base class string — flex's items-center already handles vertical alignment. text-center is kept so multi-line label buttons that relied on it still render centered (it's a no-op for flex-row layout otherwise). No call-site changes needed — pure CSS-equivalence fix on a single common component. --- src/common/Button.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/common/Button.tsx b/src/common/Button.tsx index 06d6bd7..b7cd1b0 100644 --- a/src/common/Button.tsx +++ b/src/common/Button.tsx @@ -19,7 +19,7 @@ export const Button: FC = props => // fucked up method i know (i dont have a clue what im doing because im a ninja) - const newClassNames: string[] = [ 'pointer-events-auto inline-block font-normal leading-normal text-[#fff] text-center no-underline align-middle cursor-pointer select-none border border-[solid] border-transparent px-[.75rem] py-[.375rem] text-[.9rem] rounded-[.25rem] [transition:color_.15s_ease-in-out,background-color_.15s_ease-in-out,border-color_.15s_ease-in-out,box-shadow_.15s_ease-in-out]' ]; + const newClassNames: string[] = [ 'pointer-events-auto font-normal leading-normal text-[#fff] text-center no-underline cursor-pointer select-none border border-[solid] border-transparent px-[.75rem] py-[.375rem] text-[.9rem] rounded-[.25rem] [transition:color_.15s_ease-in-out,background-color_.15s_ease-in-out,border-color_.15s_ease-in-out,box-shadow_.15s_ease-in-out]' ]; if(variant) { @@ -67,5 +67,5 @@ export const Button: FC = props => return newClassNames; }, [ variant, size, active, disabled, classNames ]); - return ; + return ; };