From 7484609a009ac1d51c38442900027a8d1ae41261 Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Tue, 28 Jan 2025 12:05:18 +0100
Subject: [PATCH 1/2] Prevent word wrapping when badge or trailing icon is
 (not) present

---
 v2/pink-sb/src/lib/action-menu/Anchor.svelte  | 24 ++++++++++++-------
 .../src/stories/ActionMenu.stories.svelte     |  4 +++-
 2 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/v2/pink-sb/src/lib/action-menu/Anchor.svelte b/v2/pink-sb/src/lib/action-menu/Anchor.svelte
index 8e3f3756a7..9fad72cd9c 100644
--- a/v2/pink-sb/src/lib/action-menu/Anchor.svelte
+++ b/v2/pink-sb/src/lib/action-menu/Anchor.svelte
@@ -43,14 +43,22 @@
                 <slot />
             </span>
         </Stack>
-        <Stack direction="row" gap="s" alignItems="center" justifyContent="flex-end">
-            {#if badge}
-                <Badge variant="secondary" content={badge} />
-            {/if}
-            {#if trailingIcon}
-                <Icon size="s" icon={trailingIcon} />
-            {/if}
-        </Stack>
+        {#if badge || trailingIcon}
+            <Stack
+                direction="row"
+                gap="s"
+                alignItems="center"
+                justifyContent="flex-end"
+                inline={true}
+            >
+                {#if badge}
+                    <Badge variant="secondary" content={badge} />
+                {/if}
+                {#if trailingIcon}
+                    <Icon size="s" icon={trailingIcon} />
+                {/if}
+            </Stack>
+        {/if}
     </Stack>
 </a>
 
diff --git a/v2/pink-sb/src/stories/ActionMenu.stories.svelte b/v2/pink-sb/src/stories/ActionMenu.stories.svelte
index 11e4f4a69f..a37620f6ca 100644
--- a/v2/pink-sb/src/stories/ActionMenu.stories.svelte
+++ b/v2/pink-sb/src/stories/ActionMenu.stories.svelte
@@ -40,7 +40,9 @@
 
 <Story name="Anchor">
     <ActionMenu.Root>
-        <ActionMenu.Item.Anchor href="#" leadingIcon={IconInfo}>Default</ActionMenu.Item.Anchor>
+        <ActionMenu.Item.Anchor href="#" leadingIcon={IconInfo} trailingIcon={IconInfo}
+            >Default with a very long text</ActionMenu.Item.Anchor
+        >
         <ActionMenu.Item.Anchor href="#" leadingIcon={IconInfo} disabled>
             Default
         </ActionMenu.Item.Anchor>

From ad62c7d02bd089bcde273ea3c71f045223c13f2b Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Tue, 28 Jan 2025 12:09:02 +0100
Subject: [PATCH 2/2] Fix button

---
 v2/pink-sb/src/lib/action-menu/Button.svelte  | 24 ++++++++++++-------
 .../src/stories/ActionMenu.stories.svelte     |  7 ++++++
 2 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/v2/pink-sb/src/lib/action-menu/Button.svelte b/v2/pink-sb/src/lib/action-menu/Button.svelte
index 85ca9b1671..85b7bd169b 100644
--- a/v2/pink-sb/src/lib/action-menu/Button.svelte
+++ b/v2/pink-sb/src/lib/action-menu/Button.svelte
@@ -37,14 +37,22 @@
                 <slot />
             </span>
         </Stack>
-        <Stack direction="row" gap="s" alignItems="center" justifyContent="flex-end">
-            {#if badge}
-                <Badge variant="secondary" content={badge} />
-            {/if}
-            {#if trailingIcon}
-                <Icon size="s" icon={trailingIcon} />
-            {/if}
-        </Stack>
+        {#if badge || trailingIcon}
+            <Stack
+                direction="row"
+                gap="s"
+                alignItems="center"
+                justifyContent="flex-end"
+                inline={true}
+            >
+                {#if badge}
+                    <Badge variant="secondary" content={badge} />
+                {/if}
+                {#if trailingIcon}
+                    <Icon size="s" icon={trailingIcon} />
+                {/if}
+            </Stack>
+        {/if}
     </Stack>
 </button>
 
diff --git a/v2/pink-sb/src/stories/ActionMenu.stories.svelte b/v2/pink-sb/src/stories/ActionMenu.stories.svelte
index a37620f6ca..f89e9a4a04 100644
--- a/v2/pink-sb/src/stories/ActionMenu.stories.svelte
+++ b/v2/pink-sb/src/stories/ActionMenu.stories.svelte
@@ -22,6 +22,13 @@
         >
             Default
         </ActionMenu.Item.Button>
+        <ActionMenu.Item.Button
+            leadingIcon={IconInfo}
+            trailingIcon={IconChevronDoubleRight}
+            badge="1"
+        >
+            Default with a very long text
+        </ActionMenu.Item.Button>
         <ActionMenu.Item.Button
             leadingIcon={IconInfo}
             trailingIcon={IconChevronDoubleRight}