diff --git a/src/components/menu-bar/menu-bar.css b/src/components/menu-bar/menu-bar.css
index ef463ad4c3bc97e427f6d9321aaed9a9102f2369..e4ed798386851a659c01154f15bbdb364c4a99a8 100644
--- a/src/components/menu-bar/menu-bar.css
+++ b/src/components/menu-bar/menu-bar.css
@@ -85,7 +85,7 @@
     background-color: $ui-black-transparent;
 }
 
-.growableMenuBarItem {
+.menu-bar-itam.growable {
     max-width: 12rem;
     flex: 1;
 }
diff --git a/src/components/menu-bar/menu-bar.jsx b/src/components/menu-bar/menu-bar.jsx
index b6313cfa77a845f3915ea6ca2591c11656128cbe..897fedc3f3166da91678c56be805566d0200b35d 100644
--- a/src/components/menu-bar/menu-bar.jsx
+++ b/src/components/menu-bar/menu-bar.jsx
@@ -393,7 +393,7 @@ class MenuBar extends React.Component {
                         <FormattedMessage {...ariaMessages.tutorials} />
                     </div>
                     <Divider className={classNames(styles.divider)} />
-                    <div className={classNames(styles.menuBarItem, styles.growableMenuBarItem)}>
+                    <div className={classNames(styles.menuBarItem, styles.growable)}>
                         <MenuBarItemTooltip
                             enable
                             id="title-field"
diff --git a/src/components/menu-bar/project-title-input.css b/src/components/menu-bar/project-title-input.css
index 92a3599a03c07b1f8120b733031d80b2b49a2de7..0567ca76614924b6a09d57b1b0a2169ceac8d655 100644
--- a/src/components/menu-bar/project-title-input.css
+++ b/src/components/menu-bar/project-title-input.css
@@ -2,6 +2,11 @@
 @import "../../css/units.css";
 @import "../../css/z-index.css";
 
+/*
+If project-title-input.jsx is part of a menu bar say menu-bar.jsx, it can have additional css classes that
+can set a width for example or what it should do in a flex box (eg. grow).
+*/
+
 .title-field {
     border: 1px dashed $ui-black-transparent;
     border-radius: $form-radius;