From bb7e66d26bce9c568165d739b6bf7182f891314c Mon Sep 17 00:00:00 2001
From: Matthew Taylor <mewtaylor@gmail.com>
Date: Fri, 22 Dec 2017 17:02:48 -0500
Subject: [PATCH] add an explicit width on the costume input

this fixes an issue with windows and the width of the top menu row
---
 src/components/forms/input.jsx               | 11 ++++++++---
 src/components/paint-editor/paint-editor.css |  4 ++++
 src/components/paint-editor/paint-editor.jsx |  2 ++
 3 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/components/forms/input.jsx b/src/components/forms/input.jsx
index 1c6d087a..95b46354 100644
--- a/src/components/forms/input.jsx
+++ b/src/components/forms/input.jsx
@@ -13,14 +13,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/paint-editor/paint-editor.css b/src/components/paint-editor/paint-editor.css
index fda6136a..0b98f35f 100644
--- a/src/components/paint-editor/paint-editor.css
+++ b/src/components/paint-editor/paint-editor.css
@@ -28,6 +28,10 @@
     margin-top: calc(2 * $grid-unit);
 }
 
+.costume-input {
+    width: 8rem;
+}
+
 .mod-dashed-border {
     border-right: 1px dashed $ui-pane-border;
     padding-right: calc(2 * $grid-unit);
diff --git a/src/components/paint-editor/paint-editor.jsx b/src/components/paint-editor/paint-editor.jsx
index 574be03e..46a9ce2d 100644
--- a/src/components/paint-editor/paint-editor.jsx
+++ b/src/components/paint-editor/paint-editor.jsx
@@ -125,6 +125,7 @@ const PaintEditorComponent = props => {
                             <MediaQuery minWidth={layout.fullSizeEditorMinWidth}>
                                 <Label text={props.intl.formatMessage(messages.costume)}>
                                     <BufferedInput
+                                        className={styles.costumeInput}
                                         type="text"
                                         value={props.name}
                                         onSubmit={props.onUpdateName}
@@ -133,6 +134,7 @@ const PaintEditorComponent = props => {
                             </MediaQuery>
                             <MediaQuery maxWidth={layout.fullSizeEditorMinWidth - 1}>
                                 <BufferedInput
+                                    className={styles.costumeInput}
                                     type="text"
                                     value={props.name}
                                     onSubmit={props.onUpdateName}