Bills: fix Record Payment dialog overflow

The 'Apply existing payment' candidate list spilled outside the dialog.
Cap the dialog at max-h-[85vh] with overflow-y-auto and drop the list's
nested scroll so the whole dialog scrolls as one and stays contained.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
2026-06-19 00:25:53 -04:00
parent ed6b926768
commit 1f6abf07ae
+2 -2
View File
@@ -933,7 +933,7 @@ export default function AccountingBillsPage() {
{/* Payment dialog */} {/* Payment dialog */}
<Dialog open={!!payBill} onOpenChange={(o) => !o && setPayBill(null)}> <Dialog open={!!payBill} onOpenChange={(o) => !o && setPayBill(null)}>
<DialogContent className="max-w-lg"> <DialogContent className="max-w-lg max-h-[85vh] overflow-y-auto">
<DialogHeader> <DialogHeader>
<DialogTitle>Record payment {payBill ? `· Bill ${payBill.number}` : ""}</DialogTitle> <DialogTitle>Record payment {payBill ? `· Bill ${payBill.number}` : ""}</DialogTitle>
</DialogHeader> </DialogHeader>
@@ -960,7 +960,7 @@ export default function AccountingBillsPage() {
<div className="text-xs text-muted-foreground"> <div className="text-xs text-muted-foreground">
Pick a bank payment already in the register to settle this bill no new withdrawal is created. Same-vendor and exact-amount matches are listed first. Pick a bank payment already in the register to settle this bill no new withdrawal is created. Same-vendor and exact-amount matches are listed first.
</div> </div>
<div className="max-h-72 overflow-y-auto rounded-md border divide-y"> <div className="rounded-md border divide-y">
{(() => { {(() => {
const bal = Number(payBill.balance); const bal = Number(payBill.balance);
const cands = [...(unmatchedPayments as any[])].sort((a, b) => { const cands = [...(unmatchedPayments as any[])].sort((a, b) => {