From 67c98ba3cf21d918d8e5a0ed1b74ab9ad8d7367d Mon Sep 17 00:00:00 2001
From: DD <liudi08@gmail.com>
Date: Mon, 29 Jan 2018 11:31:07 -0500
Subject: [PATCH 1/2] Fix input css to apply only to text fields

---
 src/css/typography.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/css/typography.css b/src/css/typography.css
index 7a3b8b986..c1ec85a84 100644
--- a/src/css/typography.css
+++ b/src/css/typography.css
@@ -12,6 +12,6 @@ p {
     line-height: 1.5em;
 }
 
-input {
+input[type="text"] {
     width: 8rem;
 }

From b5aa458bf40a790ad52bacac45cffaf6b94e38c3 Mon Sep 17 00:00:00 2001
From: DD <liudi08@gmail.com>
Date: Mon, 29 Jan 2018 14:32:43 -0500
Subject: [PATCH 2/2] Apply input width change only to sprite name field

---
 src/components/forms/input.jsx             | 11 ++++++++---
 src/components/sprite-info/sprite-info.css |  4 ++++
 src/components/sprite-info/sprite-info.jsx |  1 +
 src/css/typography.css                     |  4 ----
 4 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/components/forms/input.jsx b/src/components/forms/input.jsx
index 6f9cbffa8..c5c80ee6b 100644
--- a/src/components/forms/input.jsx
+++ b/src/components/forms/input.jsx
@@ -9,14 +9,19 @@ const Input = props => {
     return (
         <input
             {...componentProps}
-            className={classNames(styles.inputForm, {
-                [styles.inputSmall]: small
-            })}
+            className={classNames(
+                styles.inputForm,
+                props.className,
+                {
+                    [styles.inputSmall]: small
+                }
+            )}
         />
     );
 };
 
 Input.propTypes = {
+    className: PropTypes.string,
     small: PropTypes.bool
 };
 
diff --git a/src/components/sprite-info/sprite-info.css b/src/components/sprite-info/sprite-info.css
index 67222ba61..0ac55d25b 100644
--- a/src/components/sprite-info/sprite-info.css
+++ b/src/components/sprite-info/sprite-info.css
@@ -103,3 +103,7 @@
 .larger-input input {
     width: 4rem;
 }
+
+.sprite-input {
+    width: 8rem;
+}
diff --git a/src/components/sprite-info/sprite-info.jsx b/src/components/sprite-info/sprite-info.jsx
index 202ac2a7d..7d0acf952 100644
--- a/src/components/sprite-info/sprite-info.jsx
+++ b/src/components/sprite-info/sprite-info.jsx
@@ -39,6 +39,7 @@ class SpriteInfo extends React.Component {
                     <div className={styles.group}>
                         <Label text="Sprite">
                             <BufferedInput
+                                className={styles.spriteInput}
                                 disabled={this.props.disabled}
                                 placeholder="Name"
                                 tabIndex="0"
diff --git a/src/css/typography.css b/src/css/typography.css
index c1ec85a84..348e1df5a 100644
--- a/src/css/typography.css
+++ b/src/css/typography.css
@@ -11,7 +11,3 @@ p {
     font-size: 1rem;
     line-height: 1.5em;
 }
-
-input[type="text"] {
-    width: 8rem;
-}