From 2d9c961d4f0d03cfd2f3c15dd306fad47ad1f259 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Wed, 24 Oct 2018 13:05:52 -0700
Subject: feat: change to increasing input width by a constant amount per
 additional character

---
 packages/instant/src/components/scaling_input.tsx | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

(limited to 'packages/instant/src')

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`;
-- 
cgit