fix: Modal footer outside scroll + checkbox yes/no conversion

This commit is contained in:
dwindown
2025-11-06 00:05:22 +07:00
parent 96f0482cfb
commit 91449bec60
2 changed files with 95 additions and 43 deletions

View File

@@ -328,17 +328,55 @@ export default function PaymentsPage() {
{/* Gateway Settings Modal */}
{selectedGateway && (
<Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
<DialogContent className="max-w-2xl max-h-[80vh] flex flex-col p-0">
<DialogHeader className="px-6 pt-6 pb-4 border-b">
<DialogContent className="max-w-2xl max-h-[80vh] flex flex-col p-0 gap-0">
<DialogHeader className="px-6 pt-6 pb-4 border-b shrink-0">
<DialogTitle>{selectedGateway.title} Settings</DialogTitle>
</DialogHeader>
<div className="flex-1 overflow-y-auto px-6 py-4">
<div className="flex-1 overflow-y-auto px-6 py-4 min-h-0">
<GenericGatewayForm
gateway={selectedGateway}
onSave={handleSaveGateway}
onCancel={() => setIsModalOpen(false)}
hideFooter
/>
</div>
{/* Footer outside scrollable area */}
<div className="border-t px-6 py-4 flex items-center justify-between shrink-0 bg-background">
<Button
type="button"
variant="outline"
onClick={() => setIsModalOpen(false)}
disabled={saveMutation.isPending}
>
Cancel
</Button>
<div className="flex items-center gap-2">
<Button
type="button"
variant="ghost"
asChild
>
<a
href={selectedGateway.wc_settings_url}
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center gap-1"
>
View in WooCommerce
<ExternalLink className="h-4 w-4" />
</a>
</Button>
<Button
onClick={() => {
const form = document.querySelector('form');
if (form) form.requestSubmit();
}}
disabled={saveMutation.isPending}
>
{saveMutation.isPending ? 'Saving...' : 'Save Settings'}
</Button>
</div>
</div>
</DialogContent>
</Dialog>
)}