diff --git a/res/css/views/rooms/_RoomPreviewBar.scss b/res/css/views/rooms/_RoomPreviewBar.scss
index cc3263bef3..e62f488bfa 100644
--- a/res/css/views/rooms/_RoomPreviewBar.scss
+++ b/res/css/views/rooms/_RoomPreviewBar.scss
@@ -28,6 +28,10 @@ limitations under the License.
     -webkit-align-items: center;
 }
 
+.mx_RoomPreviewBar_dialog {
+    margin: auto;
+}
+
 .mx_RoomPreviewBar_join_text {
     color: $warning-color;
 }
diff --git a/src/components/views/rooms/RoomPreviewBar.js b/src/components/views/rooms/RoomPreviewBar.js
index 95cecf32d9..f331f07f03 100644
--- a/src/components/views/rooms/RoomPreviewBar.js
+++ b/src/components/views/rooms/RoomPreviewBar.js
@@ -21,6 +21,7 @@ const React = require('react');
 import PropTypes from 'prop-types';
 const sdk = require('../../../index');
 const MatrixClientPeg = require('../../../MatrixClientPeg');
+import classNames from 'classnames';
 
 import { _t } from '../../../languageHandler';
 
@@ -234,8 +235,13 @@ module.exports = React.createClass({
             );
         }
 
+        const classes = classNames("mx_RoomPreviewBar", "dark-panel", {
+            "mx_RoomPreviewBar_panel": this.props.canPreview,
+            "mx_RoomPreviewBar_dialog": !this.props.canPreview,
+        });
+
         return (
-            <div className="mx_RoomPreviewBar dark-panel">
+            <div className={classes}>
                 <div className="mx_RoomPreviewBar_wrapper">
                     { joinBlock }
                     { previewBlock }