Fix LeftPanel size being incorrect when TagPanel disabled

lukebarnard1 · lukebarnard1 · commit 009e01c1b08d · 2018-02-14T10:18:12.000Z
A previous PR (element-hq#6134) assumed that the TagPanel feature would always be enabled, leading to strangeness when it wasn't: element-hq#6136. (FTR the original layout bug was element-hq#6133)
diff --git a/src/components/structures/LeftPanel.js b/src/components/structures/LeftPanel.js
@@ -238,15 +238,21 @@ var LeftPanel = React.createClass({
             }
         );
 
+        const tagPanelEnabled = SettingsStore.isFeatureEnabled("feature_tag_panel");
+        const tagPanel = tagPanelEnabled ? <TagPanel /> : <div />;
+
         const containerClasses = classNames(
             "mx_LeftPanel_container",
-            { "mx_LeftPanel_container_collapsed": this.props.collapsed },
+            {
+                "mx_LeftPanel_container_collapsed": this.props.collapsed,
+                "mx_LeftPanel_container_hasTagPanel": tagPanelEnabled,
+            },
         );
 
         return (
             <DragDropContext onDragEnd={this.onDragEnd}>
                 <div className={containerClasses}>
-                    { SettingsStore.isFeatureEnabled("feature_tag_panel") ? <TagPanel /> : <div /> }
+                    { tagPanel }
                     <aside className={classes} onKeyDown={ this._onKeyDown } onFocus={ this._onFocus } onBlur={ this._onBlur }>
                         { topBox }
                         <CallPreview ConferenceHandler={VectorConferenceHandler} />
diff --git a/src/skins/vector/css/vector-web/structures/_LeftPanel.scss b/src/skins/vector/css/vector-web/structures/_LeftPanel.scss
@@ -23,10 +23,21 @@ limitations under the License.
 
 .mx_LeftPanel_container {
     display: flex;
+    /* LeftPanel 235px */
+    flex: 0 0 235px;
+}
+
+.mx_LeftPanel_container.mx_LeftPanel_container_hasTagPanel {
+    /* TagPanel 60px + LeftPanel 235px */
     flex: 0 0 295px;
 }
 
 .mx_LeftPanel_container_collapsed {
+    /* Collapsed LeftPanel 60px */
+    flex: 0 0 60px;
+}
+
+.mx_LeftPanel_container_collapsed.mx_LeftPanel_container_hasTagPanel {
     /* TagPanel 60px + Collapsed LeftPanel 60px */
     flex: 0 0 120px;
 }
