Add a special class to enlarge the second row, also removing ellipses

src/components/forms/input.css

@@ -37,6 +37,8 @@
 }
 
 .input-small {
-    width: 3rem; 
+    width: 3rem;
+    padding: 0 0.5rem;
+    text-overflow: clip;
     text-align: center;
 }

src/components/sprite-info/sprite-info.css

@@ -98,3 +98,7 @@
     border-color: #4c97ff;
     box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
 }
+
+.larger-input input {
+    width: 4rem;
+}

src/components/sprite-info/sprite-info.jsx

@@ -145,7 +145,7 @@ class SpriteInfo extends React.Component {
                             </div>
                         </div>
                     </div>
-                    <div className={styles.group}>
+                    <div className={classNames(styles.group, styles.largerInput)}>
                         <Label
                             secondary
                             text="Size"
@@ -161,7 +161,7 @@ class SpriteInfo extends React.Component {
                             />
                         </Label>
                     </div>
-                    <div className={styles.group}>
+                    <div className={classNames(styles.group, styles.largerInput)}>
                         <Label
                             secondary
                             text="Direction"