diff --git a/src/components/structures/LeftPanel.js b/src/components/structures/LeftPanel.js
index 3260c975..0d9ab641 100644
--- a/src/components/structures/LeftPanel.js
+++ b/src/components/structures/LeftPanel.js
@@ -238,9 +238,14 @@ var LeftPanel = React.createClass({
             }
         );
 
+        const containerClasses = classNames(
+            "mx_LeftPanel_container",
+            { "mx_LeftPanel_container_collapsed": this.props.collapsed },
+        );
+
         return (
             <DragDropContext onDragEnd={this.onDragEnd}>
-                <div className="mx_LeftPanel_container">
+                <div className={containerClasses}>
                     { SettingsStore.isFeatureEnabled("feature_tag_panel") ? <TagPanel /> : <div /> }
                     <aside className={classes} onKeyDown={ this._onKeyDown } onFocus={ this._onFocus } onBlur={ this._onBlur }>
                         { topBox }
diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_TagPanel.scss b/src/skins/vector/css/matrix-react-sdk/structures/_TagPanel.scss
index ba745b11..31209bae 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/_TagPanel.scss
+++ b/src/skins/vector/css/matrix-react-sdk/structures/_TagPanel.scss
@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 .mx_TagPanel {
-    width: 60px;
+    flex: 0 0 60px;
     background-color: $tertiary-accent-color;
     cursor: pointer;
 
diff --git a/src/skins/vector/css/vector-web/structures/_LeftPanel.scss b/src/skins/vector/css/vector-web/structures/_LeftPanel.scss
index b099cff7..2f724b6d 100644
--- a/src/skins/vector/css/vector-web/structures/_LeftPanel.scss
+++ b/src/skins/vector/css/vector-web/structures/_LeftPanel.scss
@@ -23,7 +23,12 @@ limitations under the License.
 
 .mx_LeftPanel_container {
     display: flex;
-    flex: 0 0 235px;
+    flex: 0 0 295px;
+}
+
+.mx_LeftPanel_container_collapsed {
+    /* TagPanel 60px + Collapsed LeftPanel 60px */
+    flex: 0 0 120px;
 }
 
 .mx_LeftPanel_hideButton {