From 169e3e0c10bf0302aa5436318b3af1ac2821ef6c Mon Sep 17 00:00:00 2001
From: Deploy <deploy@mercadodevida.com>
Date: Wed, 26 Aug 2026 22:28:10 +0200
Subject: [PATCH] fix(pos-selfpay): sticky print button always visible in
 ReceiptModal

---
 project/apps/pos/src/components/ReceiptModal.tsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/project/apps/pos/src/components/ReceiptModal.tsx b/project/apps/pos/src/components/ReceiptModal.tsx
index eaceba1..7f8e0b3 100644
--- a/project/apps/pos/src/components/ReceiptModal.tsx
+++ b/project/apps/pos/src/components/ReceiptModal.tsx
@@ -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>