git.gladyson/openmonetis
1
0
Fork 1
mirror of https://github.com/felipegcoutinho/openmonetis.git synced 2026-05-11 03:31:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: ajusta display da calculadora para evitar overflow com valores longos

Browse Source 
Adicionado min-w-0 nos containers flex para que truncate funcione corretamente
(flex items têm min-width: auto por padrão, impedindo o ellipsis). Fonte
adaptativa via getExpressionSizeClass: escala de text-3xl a text-sm conforme
o comprimento da expressão, com thresholds distintos para modo compacto.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Felipe Coutinho
2026-05-10 13:51:50 +00:00
parent c4c52c02ab
commit f02958df1d
1 changed files with 20 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/shared/components/calculator/calculator-display.tsx
View File

@@ -11,6 +11,20 @@ type CalculatorDisplayProps = {
isResultView: boolean;
};
const getExpressionSizeClass = (length: number, compact: boolean) => {
if (compact) {
if (length <= 14) return "text-2xl";
if (length <= 20) return "text-xl";
if (length <= 28) return "text-base";
return "text-sm";
}
if (length <= 12) return "text-3xl";
if (length <= 18) return "text-2xl";
if (length <= 24) return "text-xl";
if (length <= 32) return "text-base";
return "text-sm";
};
export function CalculatorDisplay({
history,
expression,
@@ -19,8 +33,10 @@ export function CalculatorDisplay({
onCopy,
isResultView,
}: CalculatorDisplayProps) {
const sizeClass = getExpressionSizeClass(expression.length, isResultView);
return (
<div className="flex h-24 flex-col rounded-xl border bg-muted px-4 py-4 text-right">
<div className="flex h-24 min-w-0 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
@@ -31,11 +47,11 @@ export function CalculatorDisplay({
</span>
)}
</div>
<div className="mt-auto flex items-end justify-end gap-2">
<div className="mt-auto flex min-w-0 items-end justify-end gap-2">
<div
className={cn(
"truncate text-right font-semibold transition-all",
isResultView ? "text-2xl" : "text-3xl",
"min-w-0 flex-1 truncate text-right font-semibold transition-all",
sizeClass,
)}
>
{expression}