From 3d461bac70e5de70c05cfc781cd48e6581ccb26d Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Fri, 7 Mar 2025 18:09:15 -0600
Subject: [PATCH] Improve badge truncation behavior

---
 src/admin/AdminTagBadge.tsx | 1 +
 src/components/Badge.tsx    | 6 ++----
 src/tag/FavsTag.tsx         | 2 +-
 3 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/admin/AdminTagBadge.tsx b/src/admin/AdminTagBadge.tsx
index 8d467501..0696074f 100644
--- a/src/admin/AdminTagBadge.tsx
+++ b/src/admin/AdminTagBadge.tsx
@@ -19,6 +19,7 @@ export default function AdminTagBadge({
       'inline-flex items-center gap-2',
       // Fix nested EntityLink-in-Badge quirk for tags
       '[&>*>*:first-child]:items-center',
+      isTagFavs(tag) && 'translate-y-[0.5px]',
     )}>
       {isTagFavs(tag)
         ? <FavsTag />
diff --git a/src/components/Badge.tsx b/src/components/Badge.tsx
index ddd98811..78c478fd 100644
--- a/src/components/Badge.tsx
+++ b/src/components/Badge.tsx
@@ -29,7 +29,7 @@ export default function Badge({
     case 'small':
       return clsx(
         'px-[5px] h-[17px] md:h-[18px]',
-        'text-[0.7rem] font-medium rounded-[0.25rem]',
+        'text-[0.7rem] leading-none font-medium rounded-[0.25rem]',
         contrast === 'high'
           ? 'text-invert bg-invert'
           : contrast === 'frosted'
@@ -53,9 +53,7 @@ export default function Badge({
       className,
     )}>
       <span className={clsx(
-        'max-w-full inline-flex',
-        // Truncate 1 + 2 levels deep
-        'truncate *:truncate',
+        'max-w-full inline-block truncate',
         dimContent && 'opacity-50',
       )}>
         {children}
diff --git a/src/tag/FavsTag.tsx b/src/tag/FavsTag.tsx
index 36bf0d0e..84b3526a 100644
--- a/src/tag/FavsTag.tsx
+++ b/src/tag/FavsTag.tsx
@@ -33,7 +33,7 @@ export default function FavsTag({
           size={12}
           className={clsx(
             'text-amber-500',
-            'translate-x-[-1px] translate-y-[-0.5px]',
+            'translate-x-[-1px]',
           )}
         />}
       type={type}