ui fixers in 10/16

Frontend/erp-system/components/procurement/PurchaseInvoicePaymentDialog.tsx

@@ -146,11 +146,14 @@ export function PurchaseInvoicePaymentDialog({ invoice, open, onOpenChange, onPa
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-xl">
+      <DialogContent className="flex max-h-[calc(100dvh-2rem)] flex-col sm:max-w-xl">
         <DialogHeader>
-          <DialogTitle>{isDraft ? "Confirm & pay" : "Pay"} invoice {invoice.docNo}</DialogTitle>
+          <DialogTitle className="pr-8 leading-snug">{isDraft ? "Confirm & pay" : "Pay"} invoice {invoice.docNo}</DialogTitle>
         </DialogHeader>
 
+        {/* Header and footer stay put; only the form scrolls, so Pay is always reachable on a phone. */}
+        <div className="-mx-4 flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto px-4">
+
         <p className="text-sm text-muted-foreground">
           {isDraft && "This invoice is still a draft — submitting will confirm it, then record the payment. "}
           Balance due: <span className="font-medium text-foreground tabular-nums">{formatAmount(balance)}</span>
@@ -191,11 +194,13 @@ export function PurchaseInvoicePaymentDialog({ invoice, open, onOpenChange, onPa
           <PaymentLinesEditor lines={lines} onChange={setLines} accounts={accounts} balance={balance} errors={errors} />
         </FieldGroup>
 
+        </div>
+
         <DialogFooter>
-          <Button variant="outline" onClick={() => onOpenChange(false)} disabled={submitting}>
+          <Button variant="outline" className="h-11 sm:h-9" onClick={() => onOpenChange(false)} disabled={submitting}>
             Cancel
           </Button>
-          <Button onClick={submit} disabled={submitting}>
+          <Button className="h-11 sm:h-9" onClick={submit} disabled={submitting}>
             {submitting ? "Recording…" : isDraft ? "Confirm & record payment" : "Record payment"}
           </Button>
         </DialogFooter>