From 4702dd9777cd288e71b1786cca5bbfee75d03770 Mon Sep 17 00:00:00 2001
From: Bryan Cunningham <bryan.cunningham@me.com>
Date: Mon, 26 Jan 2026 17:15:22 -0500
Subject: [PATCH] move flex styles to template to fix some minor style
 overrides

---
 libs/components/src/link/link.component.html | 18 ++++++++++--------
 libs/components/src/link/link.component.ts   |  7 +++----
 libs/components/src/link/link.stories.ts     |  2 +-
 3 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/libs/components/src/link/link.component.html b/libs/components/src/link/link.component.html
index 21bc1ec38c3..1e6afd1458d 100644
--- a/libs/components/src/link/link.component.html
+++ b/libs/components/src/link/link.component.html
@@ -1,9 +1,11 @@
-@if (startIcon()) {
-  <i [class]="['bwi', startIcon()]" aria-hidden="true"></i>
-}
-<span>
-  <ng-content></ng-content>
+<span class="tw-flex tw-gap-2 tw-items-center">
+  @if (startIcon()) {
+    <i [class]="['bwi', startIcon()]" aria-hidden="true"></i>
+  }
+  <span>
+    <ng-content></ng-content>
+  </span>
+  @if (endIcon()) {
+    <i [class]="['bwi', endIcon()]" aria-hidden="true"></i>
+  }
 </span>
-@if (endIcon()) {
-  <i [class]="['bwi', endIcon()]" aria-hidden="true"></i>
-}
diff --git a/libs/components/src/link/link.component.ts b/libs/components/src/link/link.component.ts
index 227fc6615a8..3a2abf9a25c 100644
--- a/libs/components/src/link/link.component.ts
+++ b/libs/components/src/link/link.component.ts
@@ -51,9 +51,6 @@ const commonStyles = [
   "tw-border-0",
   "tw-border-none",
   "tw-rounded",
-  "tw-inline-flex",
-  "tw-items-center",
-  "tw-gap-2",
   "tw-transition",
   "tw-no-underline",
   "tw-cursor-pointer",
@@ -137,7 +134,9 @@ export class LinkComponent {
 
   readonly classList = computed(() => {
     const verticalInset = this.isButton ? "0.25rem" : "0.125rem";
-    return [`before:-tw-inset-y-[${verticalInset}]`]
+    const displayStyle = this.isButton ? "inline-block" : "inline-flex";
+
+    return [`before:-tw-inset-y-[${verticalInset}]`, `tw-${displayStyle}`]
       .concat(commonStyles)
       .concat(linkStyles[this.linkType()] ?? []);
   });
diff --git a/libs/components/src/link/link.stories.ts b/libs/components/src/link/link.stories.ts
index 65fa522d7a2..209f247c3a6 100644
--- a/libs/components/src/link/link.stories.ts
+++ b/libs/components/src/link/link.stories.ts
@@ -261,7 +261,7 @@ export const WithIcons: Story = {
         <a bitLink [linkType]="linkType" href="#" endIcon="bwi-external-link">External link</a>
       </div>
       <div class="tw-block tw-p-2">
-        <a bitLink [linkType]="linkType" href="#" startIcon="bwi-arrow-left" endIcon="bwi-arrow-right">Both icons</a>
+        <a bitLink [linkType]="linkType" href="#" startIcon="bwi-angle-left" endIcon="bwi-angle-right">Both icons</a>
       </div>
       <div class="tw-block tw-p-2">
         <button type="button" bitLink [linkType]="linkType" startIcon="bwi-plus-circle">Add item</button>