rikrdo/mercadodevida
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(pos-selfpay): sticky print button always visible in ReceiptModal

Browse Source
This commit is contained in:
Deploy
2026-08-26 22:28:10 +02:00
parent 88452df2cd
commit 169e3e0c10
1 changed files with 7 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
project/apps/pos/src/components/ReceiptModal.tsx
View File

@@ -54,22 +54,22 @@ export default function ReceiptModal({
return (
<div
className="fixed inset-0 z-[60] overflow-y-auto bg-black/50 p-4 print:static print:bg-white print:p-0"
className="fixed inset-0 z-[60] overflow-hidden bg-black/50 p-4 print:static print:bg-white print:p-0"
role="dialog"
aria-modal="true"
aria-labelledby="receipt-title"
>
<div className="relative mx-auto w-full max-w-xl rounded-2xl bg-white p-6 shadow-2xl print:max-w-none print:rounded-none print:p-0 print:shadow-none">
<div className="relative mx-auto flex h-full max-h-[calc(100vh-2rem)] w-full max-w-xl flex-col rounded-2xl bg-white p-6 shadow-2xl print:max-h-none print:max-w-none print:rounded-none print:p-0 print:shadow-none">
<button
type="button"
onClick={onDelivered}
aria-label="Cerrar"
className="no-print absolute right-4 top-4 text-2xl text-gray-400 hover:text-gray-700"
className="no-print absolute right-4 top-4 z-10 text-2xl text-gray-400 hover:text-gray-700"
>
✕
</button>
{/* Ticket content - only this gets printed */}
<div ref={articleRef} className="ticket-print-area">
{/* Ticket content - scrollable area, only this gets printed */}
<div ref={articleRef} className="ticket-print-area flex-1 overflow-y-auto print:overflow-visible">
<article className="space-y-4 bg-white text-sm text-gray-900 print:bg-white">
<header className="border-b border-dashed border-gray-400 pb-4 text-center">
{/* Logo */}
@@ -187,8 +187,8 @@ export default function ReceiptModal({
</article>
</div>
{/* Actions - hidden when printing */}
<div className="no-print mt-6 space-y-3 border-t pt-5">
{/* Actions - always visible (sticky at bottom) - hidden when printing */}
<div className="no-print mt-4 flex-shrink-0 space-y-3 border-t bg-white pt-4">
<p className="text-center text-sm text-gray-600">
{showActions ? 'Imprime o envía el ticket para preparar la siguiente venta.' : 'Pulsa Imprimir para terminar.'}
</p>