From 3de512170c8100d2612a770f4b8a9c42bb56d745 Mon Sep 17 00:00:00 2001
From: Alex Carpenter <alex.carpenter@clerk.dev>
Date: Mon, 14 Apr 2025 09:58:29 -0400
Subject: [PATCH 1/2] fix(clerk-js): Reduce line truncation maxLength

---
 packages/clerk-js/src/ui/elements/LineItems.tsx             | 2 +-
 .../clerk-js/src/ui/utils/truncateTextWithEndVisible.ts     | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/clerk-js/src/ui/elements/LineItems.tsx b/packages/clerk-js/src/ui/elements/LineItems.tsx
index 063ccc56fa8..f907039667c 100644
--- a/packages/clerk-js/src/ui/elements/LineItems.tsx
+++ b/packages/clerk-js/src/ui/elements/LineItems.tsx
@@ -229,7 +229,7 @@ function TruncatedText({ text }: { text: string }) {
         await onCopy();
       }}
     >
-      {truncateWithEndVisible(text)}
+      {truncateWithEndVisible(text, 15)}
     </Span>
   );
 }
diff --git a/packages/clerk-js/src/ui/utils/truncateTextWithEndVisible.ts b/packages/clerk-js/src/ui/utils/truncateTextWithEndVisible.ts
index e6b54e285b4..a09cb7dc0d7 100644
--- a/packages/clerk-js/src/ui/utils/truncateTextWithEndVisible.ts
+++ b/packages/clerk-js/src/ui/utils/truncateTextWithEndVisible.ts
@@ -3,12 +3,12 @@
  * with an ellipsis in the middle.
  *
  * @param {string} str - The string to truncate
- * @param {number} maxLength - Maximum total length of the truncated string (including ellipsis)
- * @param {number} endChars - Number of characters to preserve at the end
+ * @param {number} maxLength - Maximum total length of the truncated string (including ellipsis). Default is 20.
+ * @param {number} endChars - Number of characters to preserve at the end. Default is 5.
  * @return {string} - Truncated string with ellipsis in the middle
  *
  * @example
- * truncateWithEndVisible('this is a very long string') // returns 'this is a ve...tring'
+ * truncateWithEndVisible('this is a very long string') // returns 'this is a ve...ring'
  * truncateWithEndVisible('test@email.com', 10) // returns 'te...e.com'
  */
 export function truncateWithEndVisible(str: string, maxLength = 20, endChars = 5): string {

From 007bd1d3caf0b6ed54aa52dd3725a3e49acf334a Mon Sep 17 00:00:00 2001
From: Alex Carpenter <alex.carpenter@clerk.dev>
Date: Mon, 14 Apr 2025 09:59:13 -0400
Subject: [PATCH 2/2] add changeset

---
 .changeset/silly-bats-open.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/silly-bats-open.md

diff --git a/.changeset/silly-bats-open.md b/.changeset/silly-bats-open.md
new file mode 100644
index 00000000000..1b88d42a88c
--- /dev/null
+++ b/.changeset/silly-bats-open.md
@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Fix issue where truncated text was wraping within line items.