aboutsummaryrefslogtreecommitdiffstats
path: root/packages/instant/src/components/scaling_input.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'packages/instant/src/components/scaling_input.tsx')
-rw-r--r--packages/instant/src/components/scaling_input.tsx9
1 files changed, 4 insertions, 5 deletions
diff --git a/packages/instant/src/components/scaling_input.tsx b/packages/instant/src/components/scaling_input.tsx
index 6948c86c1..fd517def8 100644
--- a/packages/instant/src/components/scaling_input.tsx
+++ b/packages/instant/src/components/scaling_input.tsx
@@ -13,7 +13,7 @@ export enum ScalingInputPhase {
export interface ScalingSettings {
percentageToReduceFontSizePerCharacter: number;
- percentageToIncreaseWidthPerCharacter: number;
+ constantPxToIncreaseWidthPerCharacter: number;
}
export interface ScalingInputProps {
@@ -40,7 +40,7 @@ export interface ScalingInputSnapshot {
// These are magic numbers that were determined experimentally.
const defaultScalingSettings: ScalingSettings = {
percentageToReduceFontSizePerCharacter: 0.125,
- percentageToIncreaseWidthPerCharacter: 0.06,
+ constantPxToIncreaseWidthPerCharacter: 4,
};
export class ScalingInput extends React.Component<ScalingInputProps, ScalingInputState> {
@@ -148,9 +148,8 @@ export class ScalingInput extends React.Component<ScalingInputProps, ScalingInpu
const { inputWidthPxAtPhaseChange } = this.state;
if (!_.isUndefined(inputWidthPxAtPhaseChange)) {
const charactersOverMax = value.length - textLengthThreshold;
- const scalingFactor =
- (scalingSettings.percentageToIncreaseWidthPerCharacter + 1) ** charactersOverMax;
- const width = scalingFactor * inputWidthPxAtPhaseChange;
+ const scalingAmount = scalingSettings.constantPxToIncreaseWidthPerCharacter * charactersOverMax;
+ const width = inputWidthPxAtPhaseChange + scalingAmount;
return `${width}px`;
}
return `${textLengthThreshold}ch`;