add an explicit width on the costume input

this fixes an issue with windows and the width of the top menu row
This commit is contained in:
Matthew Taylor 2017-12-22 17:02:48 -05:00
parent 900897c767
commit bb7e66d26b
3 changed files with 14 additions and 3 deletions

View file

@ -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
};

View file

@ -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);

View file

@ -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}