fix: link icons pixel details

Set mailto icon to 1em me-1 and external arrow  to 0.875em ms-1 default, each with mb-0.5 for custom pixel alignment, while remaining inline. Maz size applied of 1rem, limiting size but allowing to shrink for smaller text. Link's contained in ButtonLink are in a flex with gap, so appropriately margin override applied via `data-label='arrow'` selector. Uses inline-flex items-center, removes align-middle and bottom margins.

Author: wackerow

src/components/ui/Link.tsx

@@ -106,7 +106,7 @@ export const BaseLink = forwardRef<HTMLAnchorElement, LinkProps>(function Link(
         {isMailto ? (
           <span className="text-nowrap">
             {!hideArrow && (
-              <Mail className="mb-0.5 me-1 inline-block size-[1em] shrink-0" />
+              <Mail className="!mb-0.5 me-1 inline-block size-[1em] shrink-0" />
             )}
             {children}
           </span>
@@ -118,8 +118,9 @@ export const BaseLink = forwardRef<HTMLAnchorElement, LinkProps>(function Link(
         </VisuallyHidden>
         {!hideArrow && !isMailto && (
           <ExternalLink
+            data-label="arrow"
             className={cn(
-              "ms-1 inline size-4 shrink-0 align-middle",
+              "!mb-0.5 ms-1 inline-block size-[0.875em] max-h-4 max-w-4 shrink-0",
               twFlipForRtl
             )}
           />

src/components/ui/buttons/Button.tsx

@@ -166,7 +166,10 @@ const ButtonLink = React.forwardRef<HTMLAnchorElement, ButtonLinkProps>(
       >
         <BaseLink
           ref={ref}
-          className={cn("no-underline hover:no-underline", className)}
+          className={cn(
+            "no-underline hover:no-underline [&_[data-label='arrow']]:ms-0",
+            className
+          )}
           activeClassName=""
           {...linkProps}
           onClick={handleClick}