feat: melhora responsividade e dialogos da interface

components/calculadora/calculator-dialog.tsx

@@ -50,8 +50,11 @@ export function CalculatorDialogContent({
 	return (
 		<DialogContent
 			ref={contentRefCallback}
-			className="p-4 sm:max-w-sm"
+			className="p-5 sm:max-w-sm sm:p-6"
 			onEscapeKeyDown={(e) => e.preventDefault()}
+			onPointerDownOutside={(e) => e.preventDefault()}
+			onFocusOutside={(e) => e.preventDefault()}
+			onInteractOutside={(e) => e.preventDefault()}
 		>
 			<DialogHeader
 				className="cursor-grab select-none space-y-2 active:cursor-grabbing"

components/calculadora/calculator-display.tsx

@@ -1,5 +1,6 @@
 import { RiCheckLine, RiFileCopyLine } from "@remixicon/react";
 import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils/ui";
 
 export type CalculatorDisplayProps = {
 	history: string | null;
@@ -7,6 +8,7 @@ export type CalculatorDisplayProps = {
 	resultText: string | null;
 	copied: boolean;
 	onCopy: () => void;
+	isResultView: boolean;
 };
 
 export function CalculatorDisplay({
@@ -15,14 +17,27 @@ export function CalculatorDisplay({
 	resultText,
 	copied,
 	onCopy,
+	isResultView,
 }: CalculatorDisplayProps) {
 	return (
-		<div className="rounded-xl border bg-muted px-4 py-5 text-right">
-			{history && (
-				<div className="text-sm text-muted-foreground">{history}</div>
-			)}
-			<div className="flex items-center justify-end gap-2">
-				<div className="text-right text-3xl font-semibold tracking-tight tabular-nums">
+		<div className="flex h-24 flex-col rounded-xl border bg-muted px-4 py-4 text-right">
+			<div className="min-h-5 truncate text-sm text-muted-foreground">
+				{history ?? (
+					<span
+						className="pointer-events-none opacity-0 select-none"
+						aria-hidden
+					>
+						0 + 0
+					</span>
+				)}
+			</div>
+			<div className="mt-auto flex items-end justify-end gap-2">
+				<div
+					className={cn(
+						"truncate text-right font-semibold tracking-tight tabular-nums leading-none transition-all",
+						isResultView ? "text-2xl" : "text-3xl",
+					)}
+				>
 					{expression}
 				</div>
 				{resultText && (

components/calculadora/calculator.tsx

@@ -64,6 +64,7 @@ export default function Calculator({
 				resultText={resultText}
 				copied={copied}
 				onCopy={copyToClipboard}
+				isResultView={Boolean(history)}
 			/>
 			<CalculatorKeypad buttons={buttons} activeOperator={operator} />
 			{onSelectValue && (