From c41efe7f5970a2b3b03033dd43c08fad9ef13713 Mon Sep 17 00:00:00 2001
From: Jamie Kyle <jamie@signal.org>
Date: Wed, 12 Nov 2025 16:59:06 -0800
Subject: [PATCH] Make AxoSymbol.Icon center in non-inline parents

---
 ts/axo/AxoBadge.dom.tsx                               |  2 +-
 ts/axo/AxoIconButton.dom.tsx                          |  2 +-
 ts/axo/AxoSymbol.dom.stories.tsx                      |  2 +-
 ts/axo/AxoSymbol.dom.tsx                              |  2 +-
 ts/components/PreferencesNotificationProfiles.dom.tsx | 10 +++-------
 5 files changed, 7 insertions(+), 11 deletions(-)

diff --git a/ts/axo/AxoBadge.dom.tsx b/ts/axo/AxoBadge.dom.tsx
index 7c0da2bb0f..132b689933 100644
--- a/ts/axo/AxoBadge.dom.tsx
+++ b/ts/axo/AxoBadge.dom.tsx
@@ -96,7 +96,7 @@ export namespace ExperimentalAxoBadge {
       }
       if (value === 'mention') {
         return (
-          <span aria-hidden className={tw('leading-none')}>
+          <span aria-hidden>
             <AxoSymbol.InlineGlyph symbol="at" label={null} />
           </span>
         );
diff --git a/ts/axo/AxoIconButton.dom.tsx b/ts/axo/AxoIconButton.dom.tsx
index a94ada9503..65ba31c139 100644
--- a/ts/axo/AxoIconButton.dom.tsx
+++ b/ts/axo/AxoIconButton.dom.tsx
@@ -15,7 +15,7 @@ type GenericButtonProps = ButtonHTMLAttributes<HTMLButtonElement>;
 
 export namespace AxoIconButton {
   const baseStyles = tw(
-    'relative rounded-full align-top leading-none select-none',
+    'relative rounded-full select-none',
     'outline-border-focused not-forced-colors:outline-0 not-forced-colors:focused:outline-[2.5px]',
     'forced-colors:border forced-colors:border-[ButtonBorder] forced-colors:bg-[ButtonFace] forced-colors:text-[ButtonText]',
     'forced-colors:disabled:text-[GrayText]',
diff --git a/ts/axo/AxoSymbol.dom.stories.tsx b/ts/axo/AxoSymbol.dom.stories.tsx
index bcba25dd04..ea586f1dee 100644
--- a/ts/axo/AxoSymbol.dom.stories.tsx
+++ b/ts/axo/AxoSymbol.dom.stories.tsx
@@ -52,7 +52,7 @@ const SymbolInfo = memo(function SymbolInfo(props: {
               <span className={tw('type-caption text-label-secondary')}>
                 {variant.title}
               </span>
-              <span className={tw('text-[20px] leading-none')}>
+              <span className={tw('text-[20px]')}>
                 <Direction.Provider dir={variant.dir}>
                   <AxoSymbol.InlineGlyph
                     symbol={props.symbolName}
diff --git a/ts/axo/AxoSymbol.dom.tsx b/ts/axo/AxoSymbol.dom.tsx
index c0748e80f6..65c3b48284 100644
--- a/ts/axo/AxoSymbol.dom.tsx
+++ b/ts/axo/AxoSymbol.dom.tsx
@@ -90,7 +90,7 @@ export namespace AxoSymbol {
   }>;
 
   const iconStyles = tw(
-    'inline-flex size-[1em] shrink-0 items-center justify-center align-middle'
+    'inline-flex size-[1em] shrink-0 items-center justify-center align-middle leading-none'
   );
 
   export const Icon: FC<IconProps> = memo(props => {
diff --git a/ts/components/PreferencesNotificationProfiles.dom.tsx b/ts/components/PreferencesNotificationProfiles.dom.tsx
index 87499f0d6e..08be15b184 100644
--- a/ts/components/PreferencesNotificationProfiles.dom.tsx
+++ b/ts/components/PreferencesNotificationProfiles.dom.tsx
@@ -1593,7 +1593,7 @@ function EmojiOrMoon({
     return (
       <div
         className={tw(
-          'absolute start-1/2 top-1/2 -translate-1/2 leading-none text-color-label-primary'
+          'absolute start-1/2 top-1/2 -translate-1/2 text-color-label-primary'
         )}
         style={
           forceLightTheme
@@ -2073,9 +2073,7 @@ function TimePicker({
         }}
         value={formatTimeForInput(time)}
       >
-        <DateInput
-          className={tw('inline-flex min-w-[5em] items-center leading-none')}
-        >
+        <DateInput className={tw('inline-flex min-w-[5em] items-center')}>
           {segment => {
             // We don't need the space between the time and the am/pm
             if (segment.type === 'literal' && segment.text === ' ') {
@@ -2103,9 +2101,7 @@ function TimePicker({
         </DateInput>
         <button
           className={classNames(
-            tw(
-              'ms-3 p-0.5 leading-none outline-0 focus-visible:bg-fill-selected'
-            ),
+            tw('ms-3 p-0.5 outline-0 focus-visible:bg-fill-selected'),
             isDisabled ? tw('text-label-placeholder') : null
           )}
           type="button"