Improve responsiveness

This commit is contained in:
Sebastien Castiel
2023-12-06 21:07:51 -05:00
parent 59bb784b1c
commit ec981fd237
4 changed files with 94 additions and 124 deletions

View File

@@ -20,11 +20,13 @@ export function ReimbursementList({
return (
<div className="text-sm">
{reimbursements.map((reimbursement, index) => (
<div className="border-t p-4 flex justify-between" key={index}>
<div>
<strong>{getParticipant(reimbursement.from)?.name}</strong> owes{' '}
<strong>{getParticipant(reimbursement.to)?.name}</strong>
<Button variant="link" asChild className="-my-3">
<div className="border-t px-6 py-4 flex justify-between" key={index}>
<div className="flex flex-col gap-1 items-start sm:flex-row sm:items-baseline sm:gap-4">
<div>
<strong>{getParticipant(reimbursement.from)?.name}</strong> owes{' '}
<strong>{getParticipant(reimbursement.to)?.name}</strong>
</div>
<Button variant="link" asChild className="-mx-4 -my-3">
<Link
href={`/groups/${groupId}/expenses/create?reimbursement=yes&from=${reimbursement.from}&to=${reimbursement.to}&amount=${reimbursement.amount}`}
>