Skip to content

fix: prevent expense name truncation in group expense list #684

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
krokosik merged 4 commits into from
Jun 21, 2026
Merged

fix: prevent expense name truncation in group expense list #684

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
cbfb618
fix: prevent expense name truncation in group expense list
Ziesie1 Jun 19, 2026
666f1bf
fix: truncation for description and Settlement
Ziesie1 Jun 21, 2026
f1c0247
fix: truncation and add word break for balance list
Ziesie1 Jun 21, 2026
8af0d14
fix: other truncation issues for to long text's and user names
Ziesie1 Jun 21, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 7 additions & 2 deletions src/components/AddExpense/AddExpensePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -338,8 +338,13 @@ export const AddOrEditExpensePage: React.FC<{
<div className="flex flex-col items-center justify-center text-sm text-gray-400 sm:mt-4 sm:flex-row">
<p>{t(`ui.expense.${isNegative ? 'received_by' : 'paid_by'}`)}</p>
<PayerSelectionForm>
<Button variant="ghost" className="text-primary h-8 px-1.5 py-0 text-base">
{displayName(paidBy, currentUser?.id, 'dativus')}
<Button
variant="ghost"
className="text-primary h-8 max-w-full min-w-0 justify-start px-1.5 py-0 text-base sm:max-w-none"
>
<span className="max-w-full truncate">
{displayName(paidBy, currentUser?.id, 'dativus')}
</span>
</Button>
</PayerSelectionForm>
<p>{t('ui.and')} </p>
Expand Down
8 changes: 4 additions & 4 deletions src/components/AddExpense/SelectUserOrGroup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)}
>
<div className="flex items-center gap-4">
<div className="flex min-w-0 items-center gap-4">
<EntityAvatar entity={f} size={35} />
<div>{f.name ?? f.email}</div>
<div className="truncate">{f.name ?? f.email}</div>
</div>
{participants.some((p) => p.id === f.id) ? (
<div>
Expand All @@ -186,9 +186,9 @@ export const SelectUserOrGroup: React.FC<{
className="border-b border-gray-900 py-4"
onClick={() => onGroupSelect(g.group)}
>
<div className="flex items-center gap-4">
<div className="flex min-w-0 items-center gap-4">
<EntityAvatar entity={g.group} size={35} />
<p>{g.group.name}</p>
<p className="truncate">{g.group.name}</p>
</div>
</button>
))}
Expand Down
10 changes: 5 additions & 5 deletions src/components/AddExpense/SplitTypeSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,9 +63,9 @@ const PayerRow = ({ p, isPaying }: { p: Participant; isPaying: boolean }) => {

return (
<AppDrawerClose className="flex items-center justify-between px-2" onClick={onClick}>
<div className="flex items-center gap-1">
<div className="flex min-w-0 items-center gap-1">
<EntityAvatar entity={p} size={30} />
<p className="ml-4">{displayName(p, currentUser?.id)}</p>
<p className="ml-4 truncate">{displayName(p, currentUser?.id)}</p>
</div>
{isPaying ? <Check className="h-6 w-6 text-cyan-500" /> : null}
</AppDrawerClose>
Expand Down Expand Up @@ -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 (
<div className="flex h-11 items-center gap-2">
<div className="flex h-11 min-w-0 flex-1 items-center gap-2">
<EntityAvatar entity={user} size={30} />
<div className="flex flex-col items-start">
<p>{displayName(user, currentUser?.id)}</p>
<div className="flex min-w-0 flex-col">
<p className="truncate">{displayName(user, currentUser?.id)}</p>
<p
className={cn(
canSplitScreenClosed || 'hidden',
Expand Down
4 changes: 2 additions & 2 deletions src/components/AddExpense/UserInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,10 +83,10 @@ export const UserInput: React.FC<{
p.id !== currentUser?.id ? (
<div
key={p.id}
className="flex items-center gap-2 rounded-full bg-slate-800 p-0.5 pr-4"
className="flex max-w-40 items-center gap-2 rounded-full bg-slate-800 p-0.5 pr-4"
>
<EntityAvatar entity={p} size={30} />
<p className="text-xs">{p.name ?? p.email}</p>
<p className="truncate text-xs">{p.name ?? p.email}</p>
</div>
) : null,
)
Expand Down
4 changes: 2 additions & 2 deletions src/components/Expense/BalanceEntry.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,9 +24,9 @@ export const BalanceEntry: React.FC<{

return (
<Link className="flex items-center justify-between" href={`${currentRoute}/${id}`}>
<div className="flex items-center gap-3">
<div className="flex min-w-0 items-center gap-3">
<EntityAvatar entity={entity} size={35} />
<div className="text-foreground">{displayName(entity)}</div>
<div className="text-foreground truncate">{displayName(entity)}</div>
</div>
<div className="text-right" onClick={stopPropagation}>
<ConvertibleBalance withText balances={balances} entityId={id} />
Expand Down
6 changes: 3 additions & 3 deletions src/components/Expense/BalanceList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,10 +76,10 @@ export const BalanceList: React.FC<{

return (
<AccordionItem key={user.id} value={displayName(user)}>
<AccordionTrigger className="hover:no-underline">
<div className="flex items-center gap-3">
<AccordionTrigger className="overflow-hidden hover:no-underline">
<div className="mr-2 flex min-w-0 flex-1 items-center gap-3">
<EntityAvatar entity={user} />
<div className="text-foreground">
<div className="text-foreground line-clamp-2 min-w-0 break-words">
{displayName(user, userQuery.data?.id)}
{Object.values(total).every((amount) => 0n === amount) ? (
<span className="text-gray-400">
Expand Down
24 changes: 12 additions & 12 deletions src/components/Expense/ExpenseList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,14 +103,14 @@ const Expense: ExpenseComponent = ({ e, userId }) => {

return (
<>
<div className="flex items-center gap-4">
<div className="inline-block w-6 text-center text-xs text-gray-500">
<div className="flex min-w-0 items-center gap-4">
<div className="inline-block w-6 shrink-0 text-center text-xs text-gray-500">
{toUIDate(e.expenseDate)}
</div>
<CategoryIcon category={e.category} className="size-5 shrink-0 text-gray-400" />
<div>
<p className="max-w-[180px] truncate text-sm lg:max-w-md lg:text-base">{e.name}</p>
<p className="xs:max-w-full flex max-w-32 truncate text-center text-xs text-gray-500">
<div className="min-w-0 pe-1">
<p className="truncate text-sm lg:text-base">{e.name}</p>
<p className="truncate text-xs text-gray-500">
{displayName(e.paidByUser, userId)}{' '}
{t(`ui.expense.user.${e.amount < 0n ? 'received' : 'paid'}`)} {toUIString(e.amount)}
</p>
Expand Down Expand Up @@ -152,8 +152,8 @@ const Settlement: ExpenseComponent = ({ e, userId }) => {
{toUIDate(e.expenseDate)}
</div>
<SettleupIcon className="size-5 shrink-0 text-gray-400" />
<div>
<p className="flex text-center text-sm text-gray-400">
<div className="min-w-0">
<p className="line-clamp-2 text-sm text-gray-400">
{displayName(e.paidByUser, userId)}{' '}
{t(`ui.expense.user.${e.amount < 0n ? 'received' : 'paid'}`)} {toUIString(e.amount)}{' '}
{t('ui.expense.to')} {displayName(userDetails.data, userId)}
Expand All @@ -178,20 +178,20 @@ const CurrencyConversion: ExpenseComponent = ({ e, userId }) => {
const userDetails = api.user.getUserDetails.useQuery({ userId: receiverId! });

return (
<div className="flex items-center gap-4">
<div className="inline-block w-6 text-center text-xs text-gray-500">
<div className="flex min-w-0 items-center gap-4">
<div className="inline-block w-6 shrink-0 text-center text-xs text-gray-500">
{toUIDate(e.expenseDate)}
</div>
<CurrencyConversionIcon className="size-5 shrink-0 text-gray-400" />
<div>
<p className="max-w-[180px] truncate text-sm lg:max-w-md lg:text-base">
<div className="min-w-0">
<p className="truncate text-sm lg:text-base">
{getCurrencyHelpersCached(e.currency).toUIString(e.amount)} ➡️{' '}
{
/* @ts-ignore */
getCurrencyHelpersCached(e.conversionTo.currency).toUIString(e.conversionTo.amount)
}
</p>
<p className="flex text-center text-xs text-gray-500">
<p className="truncate text-xs text-gray-500">
{t('ui.expense.for')} {displayName(e.paidByUser, userId)} {t('ui.and')}{' '}
{displayName(userDetails.data, userId)}
</p>
Expand Down
Loading