From 33d47c6247694a6ee37bc895927483b11123901c Mon Sep 17 00:00:00 2001
From: Jonas Hungershausen <jonas.hungershausen@ory.sh>
Date: Tue, 26 Nov 2024 10:52:09 +0100
Subject: [PATCH] fix: current identifier button overflowing on long values

---
 .../card/current-identifier-button.tsx        | 29 ++++++++++---------
 1 file changed, 15 insertions(+), 14 deletions(-)

diff --git a/packages/elements-react/src/theme/default/components/card/current-identifier-button.tsx b/packages/elements-react/src/theme/default/components/card/current-identifier-button.tsx
index ea600bb5..cff2e109 100644
--- a/packages/elements-react/src/theme/default/components/card/current-identifier-button.tsx
+++ b/packages/elements-react/src/theme/default/components/card/current-identifier-button.tsx
@@ -33,19 +33,20 @@ export function DefaultCurrentIdentifierButton() {
   ])
 
   return (
-    <div>
-      <a
-        className="cursor-pointer py-[5px] px-3 rounded-full border border-button-identifier-border-default bg-button-identifier-bg-default hover:border-button-identifier-border-hover hover:bg-button-identifier-bg-hover transition-colors inline-flex gap-1 items-center"
-        {...attributes}
-        href={initFlowUrl}
-        title={`Adjust ${nodeBackButton?.attributes.value}`}
-      >
-        <IconArrowLeft size={16} className="text-button-identifier-fg-subtle" />
-        <span className="text-sm font-medium text-button-identifier-fg-default text-ellipsis overflow-hidden text-nowrap">
-          {nodeBackButton?.attributes.value}
-        </span>
-      </a>
-    </div>
+    <a
+      className="cursor-pointer py-[5px] px-3 rounded-full border border-button-identifier-border-default bg-button-identifier-bg-default hover:border-button-identifier-border-hover hover:bg-button-identifier-bg-hover transition-colors inline-flex gap-1 items-center self-start max-w-full"
+      {...attributes}
+      href={initFlowUrl}
+      title={`Adjust ${nodeBackButton?.attributes.value}`}
+    >
+      <IconArrowLeft
+        size={16}
+        className="text-button-identifier-fg-subtle shrink-0"
+      />
+      <span className="text-sm font-medium text-button-identifier-fg-default text-ellipsis overflow-hidden text-nowrap">
+        {nodeBackButton?.attributes.value}
+      </span>
+    </a>
   )
 }
 
@@ -60,7 +61,7 @@ export function getBackButtonNode(
         (node) =>
           "name" in node.attributes &&
           node.attributes.name === "identifier" &&
-          node.group === "identifier_first",
+          ["default", "identifier_first"].includes(node.group),
       )
       break
     case FlowType.Registration: