ui fixers in 10/16

Frontend/erp-system/components/accounts/ExpenseForm.tsx

@@ -425,10 +425,10 @@ export function AddTitleDialog({
           {error && <p className="text-sm text-destructive">{error}</p>}
         </FieldGroup>
         <DialogFooter>
-          <Button variant="outline" onClick={() => onOpenChange(false)} disabled={saving}>
+          <Button variant="outline" className="h-11 sm:h-9" onClick={() => onOpenChange(false)} disabled={saving}>
             Cancel
           </Button>
-          <Button onClick={submit} disabled={saving}>
+          <Button className="h-11 sm:h-9" onClick={submit} disabled={saving}>
             {saving ? "Adding…" : "Add title"}
           </Button>
         </DialogFooter>

Frontend/erp-system/components/accounts/ExpensePaymentDialog.tsx

@@ -139,11 +139,14 @@ export function ExpensePaymentDialog({ expense, open, onOpenChange, onDone }: Ex
 
   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 ? "Post & pay" : "Pay"} expense {expense.docNo}</DialogTitle>
+          <DialogTitle className="pr-8 leading-snug">{isDraft ? "Post & pay" : "Pay"} expense {expense.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 expense is still a draft — it will be posted and paid in one step. "}
           Pay the full balance or change the amount to pay part of it now.{" "}
@@ -204,7 +207,7 @@ export function ExpensePaymentDialog({ expense, open, onOpenChange, onDone }: Ex
           </div>
 
           {accountsError && (
-            <div className="flex items-center justify-between gap-3 rounded-lg border border-destructive/30 bg-destructive/5 p-3 text-sm text-destructive">
+            <div className="flex flex-col gap-3 rounded-lg border border-destructive/30 bg-destructive/5 p-3 text-sm text-destructive sm:flex-row sm:items-center sm:justify-between">
               <span>Could not load cash/bank accounts from the ledger: {accountsError}</span>
               <Button type="button" size="sm" variant="outline" onClick={retryAccounts}>
                 Retry
@@ -220,11 +223,13 @@ export function ExpensePaymentDialog({ expense, open, onOpenChange, onDone }: Ex
           <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 ? "Post & record payment" : "Record payment"}
           </Button>
         </DialogFooter>