diff --git a/res/css/_common.scss b/res/css/_common.scss
index 5b974baceb..149ec75569 100644
--- a/res/css/_common.scss
+++ b/res/css/_common.scss
@@ -75,11 +75,6 @@ textarea {
     transition: opacity 0.2s ease-in-out;
 }
 
-.mx_fadable.mx_fadable_faded {
-    opacity: 0.3;
-    pointer-events: none;
-}
-
 /* XXX: critical hack to GeminiScrollbar to allow them to work in FF 42 and Chrome 48.
    Stop the scrollbar view from pushing out the container's overall sizing, which causes
    flexbox to adapt to the new size and cause the view to keep growing.
diff --git a/res/css/structures/_RoomView.scss b/res/css/structures/_RoomView.scss
index c115f074b4..67facaa322 100644
--- a/res/css/structures/_RoomView.scss
+++ b/res/css/structures/_RoomView.scss
@@ -60,6 +60,16 @@ limitations under the License.
     flex: 0 0 auto;
 }
 
+.mx_RoomView_auxPanel_fullHeight {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 3000;
+    background-color: $primary-bg-color;
+}
+
 .mx_RoomView_auxPanel_apps {
     max-width: 1920px ! important;
 }
@@ -71,6 +81,7 @@ limitations under the License.
 }
 
 .mx_RoomView_body {
+    position: relative; //for .mx_RoomView_auxPanel_fullHeight
     display: flex;
     flex-direction: column;
     flex: 1;
diff --git a/res/css/views/rooms/_RoomHeader.scss b/res/css/views/rooms/_RoomHeader.scss
index 035df9a9cd..032239afa7 100644
--- a/res/css/views/rooms/_RoomHeader.scss
+++ b/res/css/views/rooms/_RoomHeader.scss
@@ -19,11 +19,6 @@ limitations under the License.
     border-bottom: 1px solid $primary-hairline-color;
 }
 
-/* add 20px to the height of the header when editing */
-.mx_RoomHeader_editing {
-    flex: 0 0 93px ! important;
-}
-
 .mx_RoomHeader_wrapper {
     margin: auto;
     height: 52px;
@@ -37,7 +32,6 @@ limitations under the License.
 .mx_RoomHeader_spinner {
     flex: 1;
     height: 36px;
-    order: 2;
     padding-left: 12px;
     padding-right: 12px;
 }
@@ -46,7 +40,6 @@ limitations under the License.
     @mixin mx_DialogButton;
     margin-right: 8px;
     margin-top: -5px;
-    order: 2;
 }
 
 .mx_RoomHeader_textButton:hover {
@@ -58,7 +51,6 @@ limitations under the License.
 }
 
 .mx_RoomHeader_cancelButton {
-    order: 2;
     cursor: pointer;
     padding-left: 12px;
     padding-right: 12px;
diff --git a/res/css/views/rooms/_RoomSettings.scss b/res/css/views/rooms/_RoomSettings.scss
index b3858f3ba7..4454cd479c 100644
--- a/res/css/views/rooms/_RoomSettings.scss
+++ b/res/css/views/rooms/_RoomSettings.scss
@@ -16,8 +16,7 @@ limitations under the License.
 */
 
 .mx_RoomSettings {
-    margin-left: 65px;
-    margin-bottom: 20px;
+    margin: 40px;
 }
 
 .mx_RoomSettings_upgradeButton,
diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js
index 12af0eceac..1f770c66c6 100644
--- a/src/components/structures/RoomView.js
+++ b/src/components/structures/RoomView.js
@@ -1666,6 +1666,7 @@ module.exports = React.createClass({
 
         const auxPanel = (
             <AuxPanel ref="auxPanel" room={this.state.room}
+              fullHeight={this.state.editingRoomSettings}
               userId={MatrixClientPeg.get().credentials.userId}
               conferenceHandler={this.props.ConferenceHandler}
               draggingFile={this.state.draggingFile}
diff --git a/src/components/views/rooms/AuxPanel.js b/src/components/views/rooms/AuxPanel.js
index 1f0fb2831b..64c0478d41 100644
--- a/src/components/views/rooms/AuxPanel.js
+++ b/src/components/views/rooms/AuxPanel.js
@@ -23,6 +23,7 @@ import dis from "../../../dispatcher";
 import ObjectUtils from '../../../ObjectUtils';
 import AppsDrawer from './AppsDrawer';
 import { _t } from '../../../languageHandler';
+import classNames from 'classnames';
 
 
 module.exports = React.createClass({
@@ -51,6 +52,7 @@ module.exports = React.createClass({
         // a callback which is called when the content of the aux panel changes
         // content in a way that is likely to make it change size.
         onResize: PropTypes.func,
+        fullHeight: PropTypes.bool,
     },
 
     defaultProps: {
@@ -143,8 +145,17 @@ module.exports = React.createClass({
             hide={this.props.hideAppsDrawer}
         />;
 
+        const classes = classNames({
+            "mx_RoomView_auxPanel": true,
+            "mx_RoomView_auxPanel_fullHeight": this.props.fullHeight,
+        });
+        const style = {};
+        if (!this.props.fullHeight) {
+            style.maxHeight = this.props.maxHeight;
+        }
+
         return (
-            <div className="mx_RoomView_auxPanel" style={{maxHeight: this.props.maxHeight}} >
+            <div className={classes} style={style} >
                 { appsDrawer }
                 { fileDropTarget }
                 { callView }