diff --git a/res/css/views/dialogs/_CreateRoomDialog.scss b/res/css/views/dialogs/_CreateRoomDialog.scss
index 888f147d216..05d5bfcebf2 100644
--- a/res/css/views/dialogs/_CreateRoomDialog.scss
+++ b/res/css/views/dialogs/_CreateRoomDialog.scss
@@ -23,6 +23,10 @@ limitations under the License.
     padding-bottom: 12px;
 }
 
+.mx_CreateRoomDialog_input_container {
+    padding-right: 20px;
+}
+
 .mx_CreateRoomDialog_input {
     font-size: 15px;
     border-radius: 3px;
@@ -30,4 +34,5 @@ limitations under the License.
     padding: 9px;
     color: $primary-fg-color;
     background-color: $primary-bg-color;
+    width: 100%;
 }
diff --git a/src/components/views/dialogs/CreateRoomDialog.js b/src/components/views/dialogs/CreateRoomDialog.js
index 51693a19c94..3b5369e8f68 100644
--- a/src/components/views/dialogs/CreateRoomDialog.js
+++ b/src/components/views/dialogs/CreateRoomDialog.js
@@ -52,8 +52,8 @@ export default React.createClass({
                         <div className="mx_CreateRoomDialog_label">
                             <label htmlFor="textinput"> { _t('Room name (optional)') } </label>
                         </div>
-                        <div>
-                            <input id="textinput" ref="textinput" className="mx_CreateRoomDialog_input" autoFocus={true} size="64" />
+                        <div className="mx_CreateRoomDialog_input_container">
+                            <input id="textinput" ref="textinput" className="mx_CreateRoomDialog_input" autoFocus={true} />
                         </div>
                         <br />