editor__calculation-counter presented three competing focal zones of nearly equal visual weight: a formula display card at top, an orphaned “+ Add DataPoint” chip floating in a gap between the two cards, and a calculator keypad card below. No single region visually dominated, making the screen’s purpose unclear at a glance.
The “+ Add DataPoint” AssistChip was placed in a standalone Row between FormulaDisplay and CalculatorKeypad, separated from both by spacers. This created a mid-band orphan that belonged visually to neither section. The calculator keypad card used the same default surface color as the formula card, giving both panels equal visual weight.
AssistChip inside the formula display card (using FormulaDisplay(wrapInContainer = false) and wrapping both in a single Card), collapsing the formula + add-variable action into one unified top focal zone.CardDefaults.cardColors(containerColor = MaterialTheme.colorScheme.tertiaryContainer) to CalculatorKeypad’s card so the calculator panel reads as a visually subordinate secondary zone.When a screen has more than two interactive sections, audit whether the inter-section spacing creates visual orphans. A button or chip that “belongs” to an adjacent panel should be inside that panel’s container, not floating in a gap below it. The two-zone rule: one primary focal zone (formula / state), one subordinate action zone (keypad / controls).