saulteafarmer/mkstack
1
0
Fork 0
mirror of https://gitlab.com/soapbox-pub/mkstack.git synced 2025-08-26 20:49:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

functional fix for drawer height bug on mobile

Browse Source
This commit is contained in:
Chad Curtis 2025-07-14 13:01:49 +00:00
parent 4c129251c7
commit 7c9f3cb797
1 changed files with 18 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/ZapDialog.tsx
View File

@ -334,6 +334,21 @@ export function ZapDialog({ target, children, className }: ZapDialogProps) {
}
}, [open, setInvoice]);
// Force drawer to expand to full height when showing invoice on mobile
useEffect(() => {
if (isMobile && open && invoice) {
// Use requestAnimationFrame to ensure DOM is ready
requestAnimationFrame(() => {
const drawerContent = document.querySelector('[data-testid="zap-modal"]') as HTMLElement;
if (drawerContent) {
// Force the drawer to full height
drawerContent.style.height = '100%';
drawerContent.style.maxHeight = '95vh';
}
});
}
}, [isMobile, open, invoice]);
const handleZap = () => {
const finalAmount = typeof amount === 'string' ? parseInt(amount, 10) : amount;
zap(finalAmount, comment);
@ -374,7 +389,8 @@ export function ZapDialog({ target, children, className }: ZapDialogProps) {
</div>
</DrawerTrigger>
<DrawerContent
className={invoice ? "h-full" : "max-h-[95vh]"}
key={invoice ? 'payment' : 'form'}
className={invoice ? "h-full max-h-screen" : "max-h-[95vh]"}
data-testid="zap-modal"
>
<DrawerHeader className="text-center relative">
@ -416,7 +432,7 @@ export function ZapDialog({ target, children, className }: ZapDialogProps) {
)}
</DrawerDescription>
</DrawerHeader>
<div className={invoice ? "flex-1 overflow-y-auto px-2 pb-4" : "overflow-y-auto"}>
<div className={invoice ? "flex-1 overflow-y-auto px-2 pb-4 min-h-0" : "overflow-y-auto"}>
<ZapContent {...contentProps} />
</div>
</DrawerContent>