From cbfb6185e846fe1a6d917f30f74f31a22ea4df8e Mon Sep 17 00:00:00 2001 From: Ziesie Date: Fri, 19 Jun 2026 18:54:51 +0200 Subject: [PATCH 1/4] fix: prevent expense name truncation in group expense list Replace hardcoded max-w-[180px] with proper flexbox min-w-0 on the text container so expense names use all available space before truncating. --- src/components/Expense/ExpenseList.tsx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/components/Expense/ExpenseList.tsx b/src/components/Expense/ExpenseList.tsx index b6c1242a..4b8e1aa7 100644 --- a/src/components/Expense/ExpenseList.tsx +++ b/src/components/Expense/ExpenseList.tsx @@ -103,13 +103,13 @@ const Expense: ExpenseComponent = ({ e, userId }) => { return ( <> -
-
+
+
{toUIDate(e.expenseDate)}
-
-

{e.name}

+
+

{e.name}

{displayName(e.paidByUser, userId)}{' '} {t(`ui.expense.user.${e.amount < 0n ? 'received' : 'paid'}`)} {toUIString(e.amount)} @@ -178,13 +178,13 @@ const CurrencyConversion: ExpenseComponent = ({ e, userId }) => { const userDetails = api.user.getUserDetails.useQuery({ userId: receiverId! }); return ( -

-
+
+
{toUIDate(e.expenseDate)}
-
-

+

+

{getCurrencyHelpersCached(e.currency).toUIString(e.amount)} ➡️{' '} { /* @ts-ignore */ From 666f1bf1876ccfa61b5b9f90b6aafb16bcfac9d2 Mon Sep 17 00:00:00 2001 From: Ziesie Date: Sun, 21 Jun 2026 15:33:35 +0200 Subject: [PATCH 2/4] fix: truncation for description and Settlement --- src/components/Expense/ExpenseList.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/Expense/ExpenseList.tsx b/src/components/Expense/ExpenseList.tsx index 4b8e1aa7..f54b6e0d 100644 --- a/src/components/Expense/ExpenseList.tsx +++ b/src/components/Expense/ExpenseList.tsx @@ -110,7 +110,7 @@ const Expense: ExpenseComponent = ({ e, userId }) => {

{e.name}

-

+

{displayName(e.paidByUser, userId)}{' '} {t(`ui.expense.user.${e.amount < 0n ? 'received' : 'paid'}`)} {toUIString(e.amount)}

@@ -152,8 +152,8 @@ const Settlement: ExpenseComponent = ({ e, userId }) => { {toUIDate(e.expenseDate)}
-
-

+

+

{displayName(e.paidByUser, userId)}{' '} {t(`ui.expense.user.${e.amount < 0n ? 'received' : 'paid'}`)} {toUIString(e.amount)}{' '} {t('ui.expense.to')} {displayName(userDetails.data, userId)} @@ -191,7 +191,7 @@ const CurrencyConversion: ExpenseComponent = ({ e, userId }) => { getCurrencyHelpersCached(e.conversionTo.currency).toUIString(e.conversionTo.amount) }

-

+

{t('ui.expense.for')} {displayName(e.paidByUser, userId)} {t('ui.and')}{' '} {displayName(userDetails.data, userId)}

From f1c024701392052b12ad7820c9af9160e6b52d54 Mon Sep 17 00:00:00 2001 From: Ziesie Date: Sun, 21 Jun 2026 16:03:27 +0200 Subject: [PATCH 3/4] fix: truncation and add word break for balance list --- src/components/Expense/BalanceList.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/Expense/BalanceList.tsx b/src/components/Expense/BalanceList.tsx index 102a3bab..311ab299 100644 --- a/src/components/Expense/BalanceList.tsx +++ b/src/components/Expense/BalanceList.tsx @@ -76,10 +76,10 @@ export const BalanceList: React.FC<{ return ( - -
+ +
-
+
{displayName(user, userQuery.data?.id)} {Object.values(total).every((amount) => 0n === amount) ? ( From 8af0d14c42521096a9ff7b54a5bd1453495b60f9 Mon Sep 17 00:00:00 2001 From: Ziesie Date: Sun, 21 Jun 2026 17:07:57 +0200 Subject: [PATCH 4/4] fix: other truncation issues for to long text's and user names --- src/components/AddExpense/AddExpensePage.tsx | 9 +++++++-- src/components/AddExpense/SelectUserOrGroup.tsx | 8 ++++---- src/components/AddExpense/SplitTypeSection.tsx | 10 +++++----- src/components/AddExpense/UserInput.tsx | 4 ++-- src/components/Expense/BalanceEntry.tsx | 4 ++-- 5 files changed, 20 insertions(+), 15 deletions(-) diff --git a/src/components/AddExpense/AddExpensePage.tsx b/src/components/AddExpense/AddExpensePage.tsx index 90a206e4..02ba9d56 100644 --- a/src/components/AddExpense/AddExpensePage.tsx +++ b/src/components/AddExpense/AddExpensePage.tsx @@ -338,8 +338,13 @@ export const AddOrEditExpensePage: React.FC<{

{t(`ui.expense.${isNegative ? 'received_by' : 'paid_by'}`)}

-

{t('ui.and')}

diff --git a/src/components/AddExpense/SelectUserOrGroup.tsx b/src/components/AddExpense/SelectUserOrGroup.tsx index 21b0a645..a2190d11 100644 --- a/src/components/AddExpense/SelectUserOrGroup.tsx +++ b/src/components/AddExpense/SelectUserOrGroup.tsx @@ -161,9 +161,9 @@ export const SelectUserOrGroup: React.FC<{ className="flex w-full items-center justify-between border-b border-gray-900 py-4" onClick={() => handleFriendClick(f)} > -
+
-
{f.name ?? f.email}
+
{f.name ?? f.email}
{participants.some((p) => p.id === f.id) ? (
@@ -186,9 +186,9 @@ export const SelectUserOrGroup: React.FC<{ className="border-b border-gray-900 py-4" onClick={() => onGroupSelect(g.group)} > -
+
-

{g.group.name}

+

{g.group.name}

))} diff --git a/src/components/AddExpense/SplitTypeSection.tsx b/src/components/AddExpense/SplitTypeSection.tsx index bb64c331..36a44a7c 100644 --- a/src/components/AddExpense/SplitTypeSection.tsx +++ b/src/components/AddExpense/SplitTypeSection.tsx @@ -63,9 +63,9 @@ const PayerRow = ({ p, isPaying }: { p: Participant; isPaying: boolean }) => { return ( -
+
-

{displayName(p, currentUser?.id)}

+

{displayName(p, currentUser?.id)}

{isPaying ? : null} @@ -434,10 +434,10 @@ export const UserAndAmount: React.FC<{ user: Participant; currency: CurrencyCode const shareAmount = paidBy?.id === user.id ? (user.amount ?? 0n) - amount : user.amount; return ( -
+
-
-

{displayName(user, currentUser?.id)}

+
+

{displayName(user, currentUser?.id)}

-

{p.name ?? p.email}

+

{p.name ?? p.email}

) : null, ) diff --git a/src/components/Expense/BalanceEntry.tsx b/src/components/Expense/BalanceEntry.tsx index 0a298f51..846b3a0c 100644 --- a/src/components/Expense/BalanceEntry.tsx +++ b/src/components/Expense/BalanceEntry.tsx @@ -24,9 +24,9 @@ export const BalanceEntry: React.FC<{ return ( -
+
-
{displayName(entity)}
+
{displayName(entity)}