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. 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)} ); } 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 {