From 87a764af456e22779d5f21b623f85b2075283512 Mon Sep 17 00:00:00 2001
From: Antonella Sgarlatta <anto@standardnotes.com>
Date: Thu, 16 Jul 2026 01:33:07 -0300
Subject: [PATCH] fix: Fixes text alignment in Super linked items

---
 .../LinkedItems/LinkedItemBubble.tsx          | 20 ++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/packages/web/src/javascripts/Components/LinkedItems/LinkedItemBubble.tsx b/packages/web/src/javascripts/Components/LinkedItems/LinkedItemBubble.tsx
index 84a8dade313..f077f3e9131 100644
--- a/packages/web/src/javascripts/Components/LinkedItems/LinkedItemBubble.tsx
+++ b/packages/web/src/javascripts/Components/LinkedItems/LinkedItemBubble.tsx
@@ -111,9 +111,9 @@ const LinkedItemBubble = ({
         ref={(el) => (ref.current = el as HTMLElement)}
         tabIndex={0}
         className={classNames(
-          'group cursor-pointer rounded ',
+          'group inline-flex min-h-6 cursor-pointer items-center rounded align-middle',
           'bg-passive-4-opacity-variant outline-1 outline-info hover:bg-contrast focus:bg-contrast focus:outline',
-          'whitespace-pre-wrap text-left text-sm text-text hover:no-underline focus:no-underline lg:text-xs',
+          'text-left text-sm text-text hover:no-underline focus:no-underline lg:text-xs',
           'py-1 pl-1 pr-2',
           className,
         )}
@@ -123,17 +123,19 @@ const LinkedItemBubble = ({
         title={tagTitle ? tagTitle.longTitle : link.item.title}
         onKeyDown={onKeyDown}
       >
-        <Icon type={icon} className={classNames('mr-1 inline h-[1.15em] align-text-top', iconClassName)} size="small" />
-        {tagTitle && <span className="text-passive-1">{tagTitle.titlePrefix}</span>}
-        {link.type === 'linked-by' && link.item.content_type !== ContentType.TYPES.Tag && (
-          <span className={!isBidirectional ? 'hidden group-focus:inline' : ''}>Linked By:</span>
-        )}
-        <span>{getItemTitleInContextOfLinkBubble(link.item)}</span>
+        <Icon type={icon} className={classNames('mr-1 flex-shrink-0', iconClassName)} size="small" />
+        <span className="whitespace-pre-wrap">
+          {tagTitle && <span className="text-passive-1">{tagTitle.titlePrefix}</span>}
+          {link.type === 'linked-by' && link.item.content_type !== ContentType.TYPES.Tag && (
+            <span className={!isBidirectional ? 'hidden group-focus:inline' : ''}>Linked By:</span>
+          )}
+          {getItemTitleInContextOfLinkBubble(link.item)}
+        </span>
         {showUnlinkButton && !readonly && (
           <button
             ref={(el) => (unlinkButtonRef.current = el as HTMLElement)}
             role="button"
-            className="-mr-1 ml-2 inline-flex h-[1.15em] cursor-pointer border-0 bg-transparent p-0 align-middle"
+            className="-mr-1 ml-2 inline-flex cursor-pointer border-0 bg-transparent p-0"
             onClick={onUnlinkClick}
           >
             <Icon type="close" className="text-neutral hover:text-info" size="small" />