move class from child to parent NOT WORKING

src/components/menu-bar/menu-bar.css

@@ -90,6 +90,11 @@
     flex: 1;
 }
 
+.title-field-growable {
+    flex-grow: 1;
+    width: 2rem;
+}
+
 .file-group {
     display: flex;
     flex-direction: row;

src/components/menu-bar/menu-bar.jsx

@@ -399,6 +399,7 @@ class MenuBar extends React.Component {
                             id="title-field"
                         >
                             <ProjectTitleInput
+                                className={classNames(styles.titleFieldGrowable)}
                                 onUpdateProjectTitle={this.props.onUpdateProjectTitle}
                             />
                         </MenuBarItemTooltip>

src/components/menu-bar/project-title-input.css

@@ -2,8 +2,6 @@
 @import "../../css/units.css";
 @import "../../css/z-index.css";
 
-$title-width: 12rem;
-
 .title-field {
     border: 1px dashed $ui-black-transparent;
     border-radius: $form-radius;
@@ -12,11 +10,8 @@ $title-width: 12rem;
     background-color: $ui-white-transparent;
     background-clip: padding-box;
     -webkit-background-clip: padding-box;
-    width: $title-width;
     height: auto;
     padding: .5rem;
-    flex-grow: 1;
-    width: 2rem;
 }
 
 .title-field {

src/components/menu-bar/project-title-input.jsx

@@ -36,7 +36,7 @@ class ProjectTitleInput extends React.Component {
     render () {
         return (
             <BufferedInput
-                className={classNames(styles.titleField)}
+                className={classNames(styles.titleField, this.props.className)}
                 maxLength="100"
                 placeholder={this.props.intl.formatMessage(messages.projectTitlePlaceholder)}
                 tabIndex="0"
@@ -49,6 +49,7 @@ class ProjectTitleInput extends React.Component {
 }
 
 ProjectTitleInput.propTypes = {
+    className: PropTypes.string,
     intl: intlShape.isRequired,
     onUpdateProjectTitle: PropTypes.func,
     projectTitle: PropTypes.string