From f30515678eedf6b56c8aae59ec3bc174b8d0671c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Mon, 9 Feb 2026 00:19:39 +0100
Subject: [PATCH 1/9] fix: make sure button/link icons always have correct size

---
 app/components/Button/Base.vue      |  6 +-----
 app/components/Link/Base.vue        | 19 ++++---------------
 app/components/Package/Versions.vue |  5 -----
 app/components/Tag/Static.vue       |  2 +-
 4 files changed, 6 insertions(+), 26 deletions(-)

diff --git a/app/components/Button/Base.vue b/app/components/Button/Base.vue
index 0dd928003..5616f34b9 100644
--- a/app/components/Button/Base.vue
+++ b/app/components/Button/Base.vue
@@ -53,11 +53,7 @@ defineExpose({
     "
     :aria-keyshortcuts="keyshortcut"
   >
-    <span
-      v-if="classicon"
-      :class="[size === 'small' ? 'size-3' : 'size-4', classicon]"
-      aria-hidden="true"
-    />
+    <span v-if="classicon" class="size-[1em]" :class="classicon" aria-hidden="true" />
     <slot />
     <kbd
       v-if="keyshortcut"
diff --git a/app/components/Link/Base.vue b/app/components/Link/Base.vue
index 7651819b8..9a1c47619 100644
--- a/app/components/Link/Base.vue
+++ b/app/components/Link/Base.vue
@@ -12,7 +12,6 @@ const props = withDefaults(
       'type'?: never
       'variant'?: 'button-primary' | 'button-secondary' | 'link'
       'size'?: 'small' | 'medium'
-      'iconSize'?: 'sm' | 'md' | 'lg'
 
       'keyshortcut'?: string
 
@@ -52,21 +51,11 @@ const isLinkAnchor = computed(
   () => !!props.to && typeof props.to === 'string' && props.to.startsWith('#'),
 )
 
-const ICON_SIZE_MAP = {
-  sm: 'size-3 min-w-3',
-  md: 'size-4 min-w-4',
-  lg: 'size-5 min-w-5',
-}
-
 /** size is only applicable for button like links */
 const isLink = computed(() => props.variant === 'link')
 const isButton = computed(() => props.variant !== 'link')
 const isButtonSmall = computed(() => props.size === 'small' && props.variant !== 'link')
 const isButtonMedium = computed(() => props.size === 'medium' && props.variant !== 'link')
-
-const iconSizeClass = computed(
-  () => ICON_SIZE_MAP[props.iconSize || (isButtonSmall.value && 'sm') || 'md'],
-)
 </script>
 
 <template>
@@ -100,22 +89,22 @@ const iconSizeClass = computed(
     :aria-keyshortcuts="keyshortcut"
     :target="isLinkExternal ? '_blank' : undefined"
   >
-    <span v-if="classicon" class="me-1" :class="[iconSizeClass, classicon]" aria-hidden="true" />
+    <span v-if="classicon" class="me-1 size-[1em]" :class="classicon" aria-hidden="true" />
     <slot />
     <!-- automatically show icon indicating external link -->
     <span
       v-if="isLinkExternal && !classicon"
-      class="i-carbon:launch rtl-flip w-3 h-3 opacity-50"
+      class="i-carbon:launch rtl-flip size-[1em] opacity-50"
       aria-hidden="true"
     />
     <span
       v-else-if="isLinkAnchor && isLink"
-      class="i-carbon:link w-3 h-3 opacity-0 group-hover/link:opacity-100 transition-opacity duration-200"
+      class="i-carbon:link size-[1em] opacity-0 group-hover/link:opacity-100 transition-opacity duration-200"
       aria-hidden="true"
     />
     <kbd
       v-if="keyshortcut"
-      class="ms-2 inline-flex items-center justify-center w-4 h-4 text-xs text-fg bg-bg-muted border border-border rounded no-underline"
+      class="ms-2 inline-flex items-center justify-center size-4 text-xs text-fg bg-bg-muted border border-border rounded no-underline"
       aria-hidden="true"
     >
       {{ keyshortcut }}
diff --git a/app/components/Package/Versions.vue b/app/components/Package/Versions.vue
index 75550492f..d3934e682 100644
--- a/app/components/Package/Versions.vue
+++ b/app/components/Package/Versions.vue
@@ -369,7 +369,6 @@ function getTagVersions(tag: string): VersionDisplay[] {
                       : row.primaryVersion.version
                   "
                   :classicon="row.primaryVersion.deprecated ? 'i-carbon-warning-hex' : undefined"
-                  icon-size="sm"
                 >
                   <span dir="ltr">
                     {{ row.primaryVersion.version }}
@@ -423,7 +422,6 @@ function getTagVersions(tag: string): VersionDisplay[] {
                     : v.version
                 "
                 :classicon="v.deprecated ? 'i-carbon-warning-hex' : undefined"
-                icon-size="sm"
               >
                 <span dir="ltr">
                   {{ v.version }}
@@ -525,7 +523,6 @@ function getTagVersions(tag: string): VersionDisplay[] {
                     : row.primaryVersion.version
                 "
                 :classicon="row.primaryVersion.deprecated ? 'i-carbon-warning-hex' : undefined"
-                icon-size="sm"
               >
                 <span dir="ltr">
                   {{ row.primaryVersion.version }}
@@ -602,7 +599,6 @@ function getTagVersions(tag: string): VersionDisplay[] {
                       :classicon="
                         group.versions[0]?.deprecated ? 'i-carbon-warning-hex' : undefined
                       "
-                      icon-size="sm"
                     >
                       <span dir="ltr">
                         {{ group.versions[0]?.version }}
@@ -664,7 +660,6 @@ function getTagVersions(tag: string): VersionDisplay[] {
                       :classicon="
                         group.versions[0]?.deprecated ? 'i-carbon-warning-hex' : undefined
                       "
-                      icon-size="sm"
                     >
                       <span dir="ltr">
                         {{ group.versions[0]?.version }}
diff --git a/app/components/Tag/Static.vue b/app/components/Tag/Static.vue
index a1eb9eb9d..0e57ac247 100644
--- a/app/components/Tag/Static.vue
+++ b/app/components/Tag/Static.vue
@@ -16,7 +16,7 @@ const props = withDefaults(
     class="bg-bg-muted text-fg-muted inline-flex gap-x-1 items-center justify-center font-mono border border-transparent rounded-md text-xs px-2 py-0.5"
     :class="{ 'opacity-40': variant === 'ghost' }"
   >
-    <span v-if="classicon" :class="['size-3', classicon]" aria-hidden="true" />
+    <span v-if="classicon" class="size-[1em]" :class="classicon" aria-hidden="true" />
     <slot />
   </component>
 </template>

From 37412df07411129f01817c5e202e97e5fd4c2ae5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Mon, 9 Feb 2026 00:31:47 +0100
Subject: [PATCH 2/9] fix: icons with to much spacing

---
 app/components/Link/Base.vue        |  2 +-
 app/components/Package/Versions.vue | 60 ++++++++++++++---------------
 2 files changed, 30 insertions(+), 32 deletions(-)

diff --git a/app/components/Link/Base.vue b/app/components/Link/Base.vue
index 9a1c47619..cbc75dfd0 100644
--- a/app/components/Link/Base.vue
+++ b/app/components/Link/Base.vue
@@ -89,7 +89,7 @@ const isButtonMedium = computed(() => props.size === 'medium' && props.variant !
     :aria-keyshortcuts="keyshortcut"
     :target="isLinkExternal ? '_blank' : undefined"
   >
-    <span v-if="classicon" class="me-1 size-[1em]" :class="classicon" aria-hidden="true" />
+    <span v-if="classicon" class="size-[1em]" :class="classicon" aria-hidden="true" />
     <slot />
     <!-- automatically show icon indicating external link -->
     <span
diff --git a/app/components/Package/Versions.vue b/app/components/Package/Versions.vue
index d3934e682..53404f7ae 100644
--- a/app/components/Package/Versions.vue
+++ b/app/components/Package/Versions.vue
@@ -354,27 +354,25 @@ function getTagVersions(tag: string): VersionDisplay[] {
           <!-- Version info -->
           <div class="flex-1 py-1.5 min-w-0 flex gap-2 justify-between items-center">
             <div class="overflow-hidden">
-              <div>
-                <LinkBase
-                  :to="versionRoute(row.primaryVersion.version)"
-                  class="text-sm block truncate"
-                  :class="
-                    row.primaryVersion.deprecated ? 'text-red-400 hover:text-red-300' : undefined
-                  "
-                  :title="
-                    row.primaryVersion.deprecated
-                      ? $t('package.versions.deprecated_title', {
-                          version: row.primaryVersion.version,
-                        })
-                      : row.primaryVersion.version
-                  "
-                  :classicon="row.primaryVersion.deprecated ? 'i-carbon-warning-hex' : undefined"
-                >
-                  <span dir="ltr">
-                    {{ row.primaryVersion.version }}
-                  </span>
-                </LinkBase>
-              </div>
+              <LinkBase
+                :to="versionRoute(row.primaryVersion.version)"
+                class="text-sm flex!"
+                :class="
+                  row.primaryVersion.deprecated ? 'text-red-400 hover:text-red-300' : undefined
+                "
+                :title="
+                  row.primaryVersion.deprecated
+                    ? $t('package.versions.deprecated_title', {
+                        version: row.primaryVersion.version,
+                      })
+                    : row.primaryVersion.version
+                "
+                :classicon="row.primaryVersion.deprecated ? 'i-carbon-warning-hex' : undefined"
+              >
+                <span dir="ltr" class="block truncate">
+                  {{ row.primaryVersion.version }}
+                </span>
+              </LinkBase>
               <div v-if="row.tags.length" class="flex items-center gap-1 mt-0.5 flex-wrap">
                 <span
                   v-for="tag in row.tags"
@@ -414,7 +412,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
             <div class="flex items-center justify-between gap-2">
               <LinkBase
                 :to="versionRoute(v.version)"
-                class="text-xs block truncate"
+                class="text-xs flex!"
                 :class="v.deprecated ? 'text-red-400 hover:text-red-300' : undefined"
                 :title="
                   v.deprecated
@@ -423,7 +421,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
                 "
                 :classicon="v.deprecated ? 'i-carbon-warning-hex' : undefined"
               >
-                <span dir="ltr">
+                <span dir="ltr" class="block truncate">
                   {{ v.version }}
                 </span>
               </LinkBase>
@@ -511,7 +509,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
             <div class="flex items-center justify-between gap-2">
               <LinkBase
                 :to="versionRoute(row.primaryVersion.version)"
-                class="text-xs block truncate"
+                class="text-xs flex!"
                 :class="
                   row.primaryVersion.deprecated ? 'text-red-400 hover:text-red-300' : undefined
                 "
@@ -524,7 +522,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
                 "
                 :classicon="row.primaryVersion.deprecated ? 'i-carbon-warning-hex' : undefined"
               >
-                <span dir="ltr">
+                <span dir="ltr" class="block truncate">
                   {{ row.primaryVersion.version }}
                 </span>
               </LinkBase>
@@ -583,7 +581,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
                     <LinkBase
                       v-if="group.versions[0]?.version"
                       :to="versionRoute(group.versions[0]?.version)"
-                      class="text-xs block truncate"
+                      class="text-xs flex!"
                       :class="
                         group.versions[0]?.deprecated
                           ? 'text-red-400 hover:text-red-300'
@@ -600,7 +598,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
                         group.versions[0]?.deprecated ? 'i-carbon-warning-hex' : undefined
                       "
                     >
-                      <span dir="ltr">
+                      <span dir="ltr" class="block truncate">
                         {{ group.versions[0]?.version }}
                       </span>
                     </LinkBase>
@@ -644,7 +642,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
                     <LinkBase
                       v-if="group.versions[0]?.version"
                       :to="versionRoute(group.versions[0]?.version)"
-                      class="text-xs block truncate"
+                      class="text-xs flex!"
                       :class="
                         group.versions[0]?.deprecated
                           ? 'text-red-400 hover:text-red-300'
@@ -661,7 +659,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
                         group.versions[0]?.deprecated ? 'i-carbon-warning-hex' : undefined
                       "
                     >
-                      <span dir="ltr">
+                      <span dir="ltr" class="block truncate">
                         {{ group.versions[0]?.version }}
                       </span>
                     </LinkBase>
@@ -703,7 +701,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
                   <div class="flex items-center justify-between gap-2">
                     <LinkBase
                       :to="versionRoute(v.version)"
-                      class="text-xs block truncate"
+                      class="text-xs flex!"
                       :class="v.deprecated ? 'text-red-400 hover:text-red-300' : undefined"
                       :title="
                         v.deprecated
@@ -712,7 +710,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
                       "
                       :classicon="v.deprecated ? 'i-carbon-warning-hex' : undefined"
                     >
-                      <span dir="ltr">
+                      <span dir="ltr" class="block truncate">
                         {{ v.version }}
                       </span>
                     </LinkBase>

From 51b4fd5c2e3d34461f35b0d27797e858cf6a7d2d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Mon, 9 Feb 2026 00:41:46 +0100
Subject: [PATCH 3/9] feat: allow to make links block elements and make buttons
 blocks by default

---
 app/components/Button/Base.vue      |  2 +-
 app/components/Link/Base.vue        | 23 ++++++++++++++---------
 app/components/Package/Versions.vue | 18 ++++++++++++------
 3 files changed, 27 insertions(+), 16 deletions(-)

diff --git a/app/components/Button/Base.vue b/app/components/Button/Base.vue
index 5616f34b9..d0f18f814 100644
--- a/app/components/Button/Base.vue
+++ b/app/components/Button/Base.vue
@@ -32,7 +32,7 @@ defineExpose({
 <template>
   <button
     ref="el"
-    class="group cursor-pointer inline-flex gap-x-1 items-center justify-center font-mono border border-border rounded-md transition-all duration-200 disabled:(opacity-40 cursor-not-allowed border-transparent)"
+    class="group cursor-pointer flex gap-x-1 items-center justify-center font-mono border border-border rounded-md transition-all duration-200 disabled:(opacity-40 cursor-not-allowed border-transparent)"
     :class="{
       'text-sm px-4 py-2': size === 'medium',
       'text-xs px-2 py-0.5': size === 'small',
diff --git a/app/components/Link/Base.vue b/app/components/Link/Base.vue
index cbc75dfd0..ed15b5048 100644
--- a/app/components/Link/Base.vue
+++ b/app/components/Link/Base.vue
@@ -10,7 +10,7 @@ const props = withDefaults(
        * `type` should never be used, because this will always be a link.
        * */
       'type'?: never
-      'variant'?: 'button-primary' | 'button-secondary' | 'link'
+      'variant'?: 'button-primary' | 'button-secondary' | 'link' | 'link-block'
       'size'?: 'small' | 'medium'
 
       'keyshortcut'?: string
@@ -52,17 +52,20 @@ const isLinkAnchor = computed(
 )
 
 /** size is only applicable for button like links */
-const isLink = computed(() => props.variant === 'link')
-const isButton = computed(() => props.variant !== 'link')
-const isButtonSmall = computed(() => props.size === 'small' && props.variant !== 'link')
-const isButtonMedium = computed(() => props.size === 'medium' && props.variant !== 'link')
+const isLink = computed(() => props.variant === 'link' || props.variant === 'link-block')
+const isButton = computed(() => !isLink.value)
+const isButtonSmall = computed(() => props.size === 'small' && !isLink.value)
+const isButtonMedium = computed(() => props.size === 'medium' && !isLink.value)
+const isBlock = computed(() => isButton || props.variant === 'link-block')
 </script>
 
 <template>
   <span
     v-if="disabled"
     :class="{
-      'opacity-50 inline-flex gap-x-1 items-center justify-center font-mono border border-transparent rounded-md':
+      'flex': isBlock,
+      'inline-flex': !isBlock,
+      'opacity-50 gap-x-1 items-center justify-center font-mono border border-transparent rounded-md':
         isButton,
       'text-sm px-4 py-2': isButtonMedium,
       'text-xs px-2 py-0.5': isButtonSmall,
@@ -73,12 +76,14 @@ const isButtonMedium = computed(() => props.size === 'medium' && props.variant !
   /></span>
   <NuxtLink
     v-else
-    class="group/link inline-flex gap-x-1 items-center justify-center"
+    class="group/link gap-x-1 items-center"
     :class="{
+      'flex': isBlock,
+      'inline-flex': !isBlock,
       'underline-offset-[0.2rem] underline decoration-1 decoration-fg/30': !isLinkAnchor && isLink,
-      'font-mono text-fg hover:(decoration-accent text-accent) focus-visible:(decoration-accent text-accent) transition-colors duration-200':
+      'justify-start font-mono text-fg hover:(decoration-accent text-accent) focus-visible:(decoration-accent text-accent) transition-colors duration-200':
         isLink,
-      'font-mono border border-border rounded-md transition-all duration-200': isButton,
+      'justify-center font-mono border border-border rounded-md transition-all duration-200': isButton,
       'text-sm px-4 py-2': isButtonMedium,
       'text-xs px-2 py-0.5': isButtonSmall,
       'bg-transparent text-fg hover:(bg-fg/10) focus-visible:(bg-fg/10)':
diff --git a/app/components/Package/Versions.vue b/app/components/Package/Versions.vue
index 53404f7ae..20c8f823b 100644
--- a/app/components/Package/Versions.vue
+++ b/app/components/Package/Versions.vue
@@ -356,7 +356,8 @@ function getTagVersions(tag: string): VersionDisplay[] {
             <div class="overflow-hidden">
               <LinkBase
                 :to="versionRoute(row.primaryVersion.version)"
-                class="text-sm flex!"
+                variant="link-block"
+                class="text-sm"
                 :class="
                   row.primaryVersion.deprecated ? 'text-red-400 hover:text-red-300' : undefined
                 "
@@ -412,7 +413,8 @@ function getTagVersions(tag: string): VersionDisplay[] {
             <div class="flex items-center justify-between gap-2">
               <LinkBase
                 :to="versionRoute(v.version)"
-                class="text-xs flex!"
+                variant="link-block"
+                class="text-xs"
                 :class="v.deprecated ? 'text-red-400 hover:text-red-300' : undefined"
                 :title="
                   v.deprecated
@@ -509,7 +511,8 @@ function getTagVersions(tag: string): VersionDisplay[] {
             <div class="flex items-center justify-between gap-2">
               <LinkBase
                 :to="versionRoute(row.primaryVersion.version)"
-                class="text-xs flex!"
+                variant="link-block"
+                class="text-xs"
                 :class="
                   row.primaryVersion.deprecated ? 'text-red-400 hover:text-red-300' : undefined
                 "
@@ -581,7 +584,8 @@ function getTagVersions(tag: string): VersionDisplay[] {
                     <LinkBase
                       v-if="group.versions[0]?.version"
                       :to="versionRoute(group.versions[0]?.version)"
-                      class="text-xs flex!"
+                      variant="link-block"
+                      class="text-xs"
                       :class="
                         group.versions[0]?.deprecated
                           ? 'text-red-400 hover:text-red-300'
@@ -642,7 +646,8 @@ function getTagVersions(tag: string): VersionDisplay[] {
                     <LinkBase
                       v-if="group.versions[0]?.version"
                       :to="versionRoute(group.versions[0]?.version)"
-                      class="text-xs flex!"
+                      variant="link-block"
+                      class="text-xs"
                       :class="
                         group.versions[0]?.deprecated
                           ? 'text-red-400 hover:text-red-300'
@@ -701,7 +706,8 @@ function getTagVersions(tag: string): VersionDisplay[] {
                   <div class="flex items-center justify-between gap-2">
                     <LinkBase
                       :to="versionRoute(v.version)"
-                      class="text-xs flex!"
+                      variant="link-block"
+                      class="text-xs"
                       :class="v.deprecated ? 'text-red-400 hover:text-red-300' : undefined"
                       :title="
                         v.deprecated

From a544c360188de164e05fe4237a19f085fd346334 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Mon, 9 Feb 2026 00:44:01 +0100
Subject: [PATCH 4/9] refactor: remove unnecessary element

---
 app/components/Package/Versions.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/app/components/Package/Versions.vue b/app/components/Package/Versions.vue
index 20c8f823b..38c997d23 100644
--- a/app/components/Package/Versions.vue
+++ b/app/components/Package/Versions.vue
@@ -642,12 +642,11 @@ function getTagVersions(tag: string): VersionDisplay[] {
               <div v-else class="py-1">
                 <div class="flex items-center justify-between gap-2">
                   <div class="flex items-center gap-2 min-w-0">
-                    <span class="w-4 shrink-0" />
                     <LinkBase
                       v-if="group.versions[0]?.version"
                       :to="versionRoute(group.versions[0]?.version)"
                       variant="link-block"
-                      class="text-xs"
+                      class="text-xs ms-6"
                       :class="
                         group.versions[0]?.deprecated
                           ? 'text-red-400 hover:text-red-300'

From 45a1a2fd49fdb4c7a510cc8d6ff90b7f3c66482f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Mon, 9 Feb 2026 01:06:28 +0100
Subject: [PATCH 5/9] fix: stop unnecessary tag truncation

---
 app/components/Package/Versions.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/Package/Versions.vue b/app/components/Package/Versions.vue
index 38c997d23..d2bf1db31 100644
--- a/app/components/Package/Versions.vue
+++ b/app/components/Package/Versions.vue
@@ -378,7 +378,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
                 <span
                   v-for="tag in row.tags"
                   :key="tag"
-                  class="text-4xs font-semibold text-fg-subtle uppercase tracking-wide truncate max-w-[150px]"
+                  class="text-4xs font-semibold text-fg-subtle uppercase tracking-wide truncate"
                   :title="tag"
                 >
                   {{ tag }}

From 57f81b0bd1bc7b61f3863c06efffba636461234f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Mon, 9 Feb 2026 01:27:56 +0100
Subject: [PATCH 6/9] fix: broken logic

---
 app/components/Link/Base.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/app/components/Link/Base.vue b/app/components/Link/Base.vue
index ed15b5048..3c86f70e9 100644
--- a/app/components/Link/Base.vue
+++ b/app/components/Link/Base.vue
@@ -56,7 +56,7 @@ const isLink = computed(() => props.variant === 'link' || props.variant === 'lin
 const isButton = computed(() => !isLink.value)
 const isButtonSmall = computed(() => props.size === 'small' && !isLink.value)
 const isButtonMedium = computed(() => props.size === 'medium' && !isLink.value)
-const isBlock = computed(() => isButton || props.variant === 'link-block')
+const isBlock = computed(() => isButton.value || props.variant === 'link-block')
 </script>
 
 <template>
@@ -83,7 +83,8 @@ const isBlock = computed(() => isButton || props.variant === 'link-block')
       'underline-offset-[0.2rem] underline decoration-1 decoration-fg/30': !isLinkAnchor && isLink,
       'justify-start font-mono text-fg hover:(decoration-accent text-accent) focus-visible:(decoration-accent text-accent) transition-colors duration-200':
         isLink,
-      'justify-center font-mono border border-border rounded-md transition-all duration-200': isButton,
+      'justify-center font-mono border border-border rounded-md transition-all duration-200':
+        isButton,
       'text-sm px-4 py-2': isButtonMedium,
       'text-xs px-2 py-0.5': isButtonSmall,
       'bg-transparent text-fg hover:(bg-fg/10) focus-visible:(bg-fg/10)':

From 322495faf83fe03833f09a9e97cd11d129ebc78a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Mon, 9 Feb 2026 01:42:09 +0100
Subject: [PATCH 7/9] fix: duplicate class

---
 app/components/AppHeader.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue
index 4d824ad6f..fe4514cfe 100644
--- a/app/components/AppHeader.vue
+++ b/app/components/AppHeader.vue
@@ -270,7 +270,7 @@ onKeyStroke(
       <!-- Mobile: Menu button (always visible, click to open menu) -->
       <ButtonBase
         type="button"
-        class="sm:hidden flex"
+        class="sm:hidden"
         :aria-label="$t('nav.open_menu')"
         :aria-expanded="showMobileMenu"
         @click="showMobileMenu = !showMobileMenu"

From 86242b9bed8268d5eee940332af6cf58987864e1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Mon, 9 Feb 2026 02:39:42 +0100
Subject: [PATCH 8/9] refactor: add explicit block prop to link and button
 comps

---
 app/components/Button/Base.vue             |  5 ++++-
 app/components/CollapsibleSection.vue      |  2 +-
 app/components/Header/AuthModal.client.vue |  7 +------
 app/components/Link/Base.vue               | 14 +++++++-------
 app/components/Package/Versions.vue        | 12 ++++++------
 app/components/ReadmeTocDropdown.vue       |  3 ++-
 app/pages/package-code/[...path].vue       |  2 --
 7 files changed, 21 insertions(+), 24 deletions(-)

diff --git a/app/components/Button/Base.vue b/app/components/Button/Base.vue
index d0f18f814..0f3505b2a 100644
--- a/app/components/Button/Base.vue
+++ b/app/components/Button/Base.vue
@@ -6,6 +6,7 @@ const props = withDefaults(
     'variant'?: 'primary' | 'secondary'
     'size'?: 'small' | 'medium'
     'keyshortcut'?: string
+    'block'?: boolean
 
     /**
      * Do not use this directly. Use keyshortcut instead; it generates the correct HTML and displays the shortcut in the UI.
@@ -32,8 +33,10 @@ defineExpose({
 <template>
   <button
     ref="el"
-    class="group cursor-pointer flex gap-x-1 items-center justify-center font-mono border border-border rounded-md transition-all duration-200 disabled:(opacity-40 cursor-not-allowed border-transparent)"
+    class="group cursor-pointer gap-x-1 items-center justify-center font-mono border border-border rounded-md transition-all duration-200 disabled:(opacity-40 cursor-not-allowed border-transparent)"
     :class="{
+      'inline-flex': !block,
+      'flex': block,
       'text-sm px-4 py-2': size === 'medium',
       'text-xs px-2 py-0.5': size === 'small',
       'bg-transparent text-fg hover:enabled:(bg-fg/10) focus-visible:enabled:(bg-fg/10) aria-pressed:(bg-fg text-bg border-fg hover:enabled:(bg-fg text-bg/50))':
diff --git a/app/components/CollapsibleSection.vue b/app/components/CollapsibleSection.vue
index 7727202c2..65a2a45cc 100644
--- a/app/components/CollapsibleSection.vue
+++ b/app/components/CollapsibleSection.vue
@@ -103,7 +103,7 @@ useHead({
           />
         </button>
 
-        <LinkBase :to="`#${id}`" class="">
+        <LinkBase :to="`#${id}`">
           {{ title }}
         </LinkBase>
       </component>
diff --git a/app/components/Header/AuthModal.client.vue b/app/components/Header/AuthModal.client.vue
index caab42736..b232aeb32 100644
--- a/app/components/Header/AuthModal.client.vue
+++ b/app/components/Header/AuthModal.client.vue
@@ -142,12 +142,7 @@ watch(handleInput, newHandleInput => {
         {{ $t('auth.modal.create_account') }}
       </ButtonBase>
       <hr class="color-border" />
-      <ButtonBase
-        type="button"
-        variant="primary"
-        class="w-full flex items-center justify-center gap-2"
-        @click="handleBlueskySignIn"
-      >
+      <ButtonBase type="button" variant="primary" class="w-full" @click="handleBlueskySignIn" block>
         {{ $t('auth.modal.connect_bluesky') }}
         <svg fill="none" viewBox="0 0 64 57" width="20" style="width: 20px">
           <path
diff --git a/app/components/Link/Base.vue b/app/components/Link/Base.vue
index 3c86f70e9..5de56c8fc 100644
--- a/app/components/Link/Base.vue
+++ b/app/components/Link/Base.vue
@@ -10,8 +10,9 @@ const props = withDefaults(
        * `type` should never be used, because this will always be a link.
        * */
       'type'?: never
-      'variant'?: 'button-primary' | 'button-secondary' | 'link' | 'link-block'
+      'variant'?: 'button-primary' | 'button-secondary' | 'link'
       'size'?: 'small' | 'medium'
+      'block'?: boolean
 
       'keyshortcut'?: string
 
@@ -52,19 +53,18 @@ const isLinkAnchor = computed(
 )
 
 /** size is only applicable for button like links */
-const isLink = computed(() => props.variant === 'link' || props.variant === 'link-block')
+const isLink = computed(() => props.variant === 'link')
 const isButton = computed(() => !isLink.value)
 const isButtonSmall = computed(() => props.size === 'small' && !isLink.value)
 const isButtonMedium = computed(() => props.size === 'medium' && !isLink.value)
-const isBlock = computed(() => isButton.value || props.variant === 'link-block')
 </script>
 
 <template>
   <span
     v-if="disabled"
     :class="{
-      'flex': isBlock,
-      'inline-flex': !isBlock,
+      'flex': block,
+      'inline-flex': !block,
       'opacity-50 gap-x-1 items-center justify-center font-mono border border-transparent rounded-md':
         isButton,
       'text-sm px-4 py-2': isButtonMedium,
@@ -78,8 +78,8 @@ const isBlock = computed(() => isButton.value || props.variant === 'link-block')
     v-else
     class="group/link gap-x-1 items-center"
     :class="{
-      'flex': isBlock,
-      'inline-flex': !isBlock,
+      'flex': block,
+      'inline-flex': !block,
       'underline-offset-[0.2rem] underline decoration-1 decoration-fg/30': !isLinkAnchor && isLink,
       'justify-start font-mono text-fg hover:(decoration-accent text-accent) focus-visible:(decoration-accent text-accent) transition-colors duration-200':
         isLink,
diff --git a/app/components/Package/Versions.vue b/app/components/Package/Versions.vue
index d2bf1db31..5f9fd0221 100644
--- a/app/components/Package/Versions.vue
+++ b/app/components/Package/Versions.vue
@@ -356,7 +356,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
             <div class="overflow-hidden">
               <LinkBase
                 :to="versionRoute(row.primaryVersion.version)"
-                variant="link-block"
+                block
                 class="text-sm"
                 :class="
                   row.primaryVersion.deprecated ? 'text-red-400 hover:text-red-300' : undefined
@@ -413,7 +413,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
             <div class="flex items-center justify-between gap-2">
               <LinkBase
                 :to="versionRoute(v.version)"
-                variant="link-block"
+                block
                 class="text-xs"
                 :class="v.deprecated ? 'text-red-400 hover:text-red-300' : undefined"
                 :title="
@@ -511,7 +511,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
             <div class="flex items-center justify-between gap-2">
               <LinkBase
                 :to="versionRoute(row.primaryVersion.version)"
-                variant="link-block"
+                block
                 class="text-xs"
                 :class="
                   row.primaryVersion.deprecated ? 'text-red-400 hover:text-red-300' : undefined
@@ -584,7 +584,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
                     <LinkBase
                       v-if="group.versions[0]?.version"
                       :to="versionRoute(group.versions[0]?.version)"
-                      variant="link-block"
+                      block
                       class="text-xs"
                       :class="
                         group.versions[0]?.deprecated
@@ -645,7 +645,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
                     <LinkBase
                       v-if="group.versions[0]?.version"
                       :to="versionRoute(group.versions[0]?.version)"
-                      variant="link-block"
+                      block
                       class="text-xs ms-6"
                       :class="
                         group.versions[0]?.deprecated
@@ -705,7 +705,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
                   <div class="flex items-center justify-between gap-2">
                     <LinkBase
                       :to="versionRoute(v.version)"
-                      variant="link-block"
+                      block
                       class="text-xs"
                       :class="v.deprecated ? 'text-red-400 hover:text-red-300' : undefined"
                       :title="
diff --git a/app/components/ReadmeTocDropdown.vue b/app/components/ReadmeTocDropdown.vue
index 16cbdad65..0fba743c9 100644
--- a/app/components/ReadmeTocDropdown.vue
+++ b/app/components/ReadmeTocDropdown.vue
@@ -152,7 +152,8 @@ function handleKeydown(event: KeyboardEvent) {
     @click="toggle"
     @keydown="handleKeydown"
     classicon="i-carbon:list"
-    class="px-2.5 flex items-center"
+    class="px-2.5"
+    block
   >
     <span
       class="i-carbon:chevron-down w-3 h-3"
diff --git a/app/pages/package-code/[...path].vue b/app/pages/package-code/[...path].vue
index 2231e704a..b3b4a02bd 100644
--- a/app/pages/package-code/[...path].vue
+++ b/app/pages/package-code/[...path].vue
@@ -497,7 +497,6 @@ defineOgImageComponent('Default', {
           <LinkBase
             variant="button-secondary"
             :to="`https://cdn.jsdelivr.net/npm/${packageName}@${version}/${filePath}`"
-            class="inline-flex items-center gap-2"
           >
             {{ $t('code.view_raw') }}
           </LinkBase>
@@ -549,7 +548,6 @@ defineOgImageComponent('Default', {
           <LinkBase
             variant="button-secondary"
             :to="`https://cdn.jsdelivr.net/npm/${packageName}@${version}/${filePath}`"
-            class="inline-flex items-center gap-2"
           >
             {{ $t('code.view_raw') }}
           </LinkBase>

From af566828a6a81540586e102616a382a80989c546 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Mon, 9 Feb 2026 02:46:57 +0100
Subject: [PATCH 9/9] refactor: use new prop for existing implementations

---
 app/components/Code/FileTree.vue          | 6 ++++--
 app/components/Compare/ComparisonGrid.vue | 3 ++-
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/app/components/Code/FileTree.vue b/app/components/Code/FileTree.vue
index e3467cbc6..c7b7434d9 100644
--- a/app/components/Code/FileTree.vue
+++ b/app/components/Code/FileTree.vue
@@ -50,7 +50,8 @@ watch(
       <!-- Directory -->
       <template v-if="node.type === 'directory'">
         <ButtonBase
-          class="w-full flex! justify-start! rounded-none! border-none!"
+          class="w-full justify-start! rounded-none! border-none!"
+          block
           :aria-pressed="isNodeActive(node)"
           :style="{ paddingLeft: `${depth * 12 + 12}px` }"
           @click="toggleDir(node.path)"
@@ -82,7 +83,8 @@ watch(
           variant="button-secondary"
           :to="getFileRoute(node.path)"
           :aria-current="currentPath === node.path"
-          class="w-full flex! justify-start! rounded-none! border-none!"
+          class="w-full justify-start! rounded-none! border-none!"
+          block
           :style="{ paddingLeft: `${depth * 12 + 32}px` }"
           :classicon="getFileIcon(node.name)"
         >
diff --git a/app/components/Compare/ComparisonGrid.vue b/app/components/Compare/ComparisonGrid.vue
index 18edfd669..3bf212957 100644
--- a/app/components/Compare/ComparisonGrid.vue
+++ b/app/components/Compare/ComparisonGrid.vue
@@ -42,7 +42,8 @@ function getReplacementTooltip(col: ComparisonGridColumn): string {
           <span class="inline-flex items-center gap-1.5 truncate">
             <LinkBase
               :to="packageRoute(col.name, col.version)"
-              class="text-sm flex! truncate"
+              class="text-sm truncate"
+              block
               :title="col.version ? `${col.name}@${col.version}` : col.name"
             >
               {{ col.name }}<template v-if="col.version">@{{ col.version }}</template>