refactor: update modal positioning logic across components to ensure consistent placement relative to the card, enhancing user experience

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

@@ -877,12 +877,85 @@
 
 	const saldoPositivo = $derived(historicoSaldo ? historicoSaldo.saldoMinutos >= 0 : false);
 
-	// Posicionamento dos modais
-	// Posicionamento dos modais
-	// Removido modalPosition pois agora será centralizado via CSS fixo
+	// Posicionamento dos modais baseado no texto "Registrar Ponto"
+	let modalPosition = $state<{ top: number; left: number } | null>(null);
 
-	// Função para obter estilo do modal (centralizado)
+	// Função para calcular a posição do modal baseada no card de registro de ponto
+	function calcularPosicaoModal() {
+		const cardRef = document.getElementById('card-registro-ponto-ref');
+		
+		if (cardRef) {
+			const rect = cardRef.getBoundingClientRect();
+			const viewportHeight = window.innerHeight;
+			
+			// Posicionar o modal na mesma altura Y do card (top do card)
+			// getBoundingClientRect() já retorna posição relativa à viewport quando usado com position: fixed
+			const top = rect.top;
+			
+			// Garantir que o modal não saia da viewport
+			// Considerar uma altura mínima do modal (aproximadamente 300px)
+			const minTop = 20;
+			const maxTop = viewportHeight - 350; // Deixar espaço para o modal
+			const finalTop = Math.max(minTop, Math.min(top, maxTop));
+			
+			return {
+				top: finalTop,
+				left: window.innerWidth / 2
+			};
+		}
+		
+		// Se não encontrar, usar posição padrão (centro da tela)
+		return null;
+	}
+
+	// Atualizar posição quando os modais forem abertos
+	$effect(() => {
+		if (mostrandoWebcam || mostrandoTransicao || aguardandoProcessamento || mostrandoModalConfirmacao) {
+			// Usar requestAnimationFrame para garantir que o DOM está completamente renderizado
+			const updatePosition = () => {
+				requestAnimationFrame(() => {
+					const pos = calcularPosicaoModal();
+					if (pos) {
+						modalPosition = pos;
+					} else {
+						// Fallback para centralização
+						modalPosition = {
+							top: window.innerHeight / 2,
+							left: window.innerWidth / 2
+						};
+					}
+				});
+			};
+			
+			// Aguardar um pouco para garantir que o DOM está atualizado
+			setTimeout(updatePosition, 50);
+			
+			// Adicionar listener de scroll para atualizar posição
+			const handleScroll = () => {
+				updatePosition();
+			};
+			
+			window.addEventListener('scroll', handleScroll, true);
+			window.addEventListener('resize', handleScroll);
+			
+			return () => {
+				window.removeEventListener('scroll', handleScroll, true);
+				window.removeEventListener('resize', handleScroll);
+			};
+		} else {
+			// Limpar posição quando o modal for fechado
+			modalPosition = null;
+		}
+	});
+
+	// Função para obter estilo do modal
 	function getModalStyle() {
+		if (modalPosition) {
+			// Posicionar na altura do card, centralizado horizontalmente
+			// position: fixed já é relativo à viewport, então podemos usar diretamente
+			return `position: fixed; top: ${modalPosition.top}px; left: 50%; transform: translateX(-50%); width: 100%; max-width: 800px;`;
+		}
+		// Fallback para centralização padrão
 		return 'position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; max-width: 800px;';
 	}
 </script>