refactor: improve layout and functionality of ComprovantePonto modal

- Enhanced the modal layout for better user experience, including fixed header and footer.
- Implemented a scrollable content area for improved visibility of registration details.
- Updated button styles for better interaction feedback.
- Ensured consistent error handling and loading states for data retrieval.

apps/web/src/lib/components/ponto/ComprovantePonto.svelte

@@ -253,15 +253,18 @@
 	}
 </script>
 
-<div class="modal modal-open">
+<div class="modal modal-open" style="display: flex; align-items: center; justify-content: center;">
-	<div class="modal-box max-w-2xl">
+	<div class="modal-box max-w-2xl w-[95%] max-h-[90vh] overflow-hidden flex flex-col" style="margin: auto;">
-		<div class="flex items-center justify-between mb-4">
+		<!-- Header fixo -->
+		<div class="flex items-center justify-between mb-4 pb-4 border-b border-base-300 flex-shrink-0">
 			<h3 class="font-bold text-lg">Comprovante de Registro de Ponto</h3>
-			<button class="btn btn-sm btn-circle btn-ghost" onclick={onClose}>
+			<button class="btn btn-sm btn-circle btn-ghost hover:bg-base-300" onclick={onClose}>
 				<X class="h-5 w-5" />
 			</button>
 		</div>
 
+		<!-- Conteúdo com rolagem -->
+		<div class="flex-1 overflow-y-auto pr-2">
 			{#if registroQuery === undefined}
 				<div class="flex justify-center items-center py-8">
 					<span class="loading loading-spinner loading-lg"></span>
@@ -325,10 +328,13 @@
 							</div>
 						</div>
 					{/if}
+				</div>
+			{/if}
+		</div>
 
-				<!-- Ações -->
+		<!-- Footer fixo com botões -->
-				<div class="flex justify-end gap-2">
+		<div class="flex justify-end gap-2 pt-4 mt-4 border-t border-base-300 flex-shrink-0">
-					<button class="btn btn-primary" onclick={gerarPDF} disabled={gerando}>
+			<button class="btn btn-primary gap-2" onclick={gerarPDF} disabled={gerando}>
 				{#if gerando}
 					<span class="loading loading-spinner loading-sm"></span>
 				{:else}
@@ -339,8 +345,6 @@
 			<button class="btn btn-outline" onclick={onClose}>Fechar</button>
 		</div>
 	</div>
-		{/if}
-	</div>
 	<div class="modal-backdrop" onclick={onClose}></div>
 </div>