git.gladyson/openmonetis
1
0
Fork 1
mirror of https://github.com/felipegcoutinho/openmonetis.git synced 2026-05-10 19:21:46 +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; 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({ export function CalculatorDisplay({
history, history,
expression, expression,
@@ -19,8 +33,10 @@ export function CalculatorDisplay({
onCopy, onCopy,
isResultView, isResultView,
}: CalculatorDisplayProps) { }: CalculatorDisplayProps) {
const sizeClass = getExpressionSizeClass(expression.length, isResultView);
return ( 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"> <div className="min-h-5 truncate text-sm text-muted-foreground">
{history ?? ( {history ?? (
<span <span
@@ -31,11 +47,11 @@ export function CalculatorDisplay({
</span> </span>
)} )}
</div> </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 <div
className={cn( className={cn(
"truncate text-right font-semibold transition-all", "min-w-0 flex-1 truncate text-right font-semibold transition-all",
isResultView ? "text-2xl" : "text-3xl", sizeClass,
)} )}
> >
{expression} {expression}