diff --git a/src/components/Badge.tsx b/src/components/Badge.tsx
index 49a72ea5..410a030a 100644
--- a/src/components/Badge.tsx
+++ b/src/components/Badge.tsx
@@ -57,7 +57,7 @@ export default function Badge({
       className,
     )}>
       <span className={clsx(
-        'max-w-full inline-block truncate',
+        'max-w-full truncate',
         dimContent && 'opacity-50',
       )}>
         {children}
diff --git a/src/components/primitives/EntityLink.tsx b/src/components/primitives/EntityLink.tsx
index 9402a15e..9fbfa094 100644
--- a/src/components/primitives/EntityLink.tsx
+++ b/src/components/primitives/EntityLink.tsx
@@ -6,6 +6,7 @@ import Badge from '../Badge';
 import { clsx } from 'clsx/lite';
 import LinkWithStatus from '../LinkWithStatus';
 import Spinner from '../Spinner';
+import ResponsiveText from './ResponsiveText';
 
 export interface EntityLinkExternalProps {
   type?: LabeledIconType
@@ -58,14 +59,10 @@ export default function EntityLink({
     }
   };
 
-  const renderLabel = () => <>
-    <span className="xs:hidden">
-      {labelSmall ?? label}
-    </span>
-    <span className="hidden xs:inline-block">
+  const renderLabel =
+    <ResponsiveText shortText={labelSmall}>
       {label}
-    </span>
-  </>;
+    </ResponsiveText>;
 
   return (
     <span className={clsx(
@@ -100,12 +97,12 @@ export default function EntityLink({
                 uppercase
                 interactive
               >
-                {renderLabel()}
+                {renderLabel}
               </Badge>
               : <span className={clsx(
                 truncate && 'inline-flex max-w-full *:truncate',
               )}>
-                {renderLabel()}
+                {renderLabel}
               </span>}
           </LabeledIcon>
           {!isLoading && hoverEntity !== undefined &&
diff --git a/src/components/primitives/ResponsiveText.tsx b/src/components/primitives/ResponsiveText.tsx
index 8a53bb68..b4892ed8 100644
--- a/src/components/primitives/ResponsiveText.tsx
+++ b/src/components/primitives/ResponsiveText.tsx
@@ -5,18 +5,18 @@ export default function ResponsiveText({
   shortText,
 }: {
   children: ReactNode
-  shortText?: string
+  shortText?: ReactNode
 }) {
   return (
     <>
+      {/* Short text */}
+      <span className="inline sm:hidden" aria-hidden>
+        {shortText ?? children}
+      </span>
       {/* Full text */}
       <span className="hidden sm:inline">
         {children}
       </span>
-      {/* Short text */}
-      <span className="sm:hidden" aria-hidden>
-        {shortText ?? children}
-      </span>
     </>
   );
 }