Fix TagPanel from collapsing to < 60px when LP collapsed

lukebarnard1 · lukebarnard1 · commit 285c4f91d38f · 2018-02-13T15:17:51.000Z
Fixes element-hq#6133
diff --git 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
@@ -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
@@ -23,6 +23,13 @@ limitations under the License.
 
 .mx_LeftPanel_container {
     display: flex;
+
+    flex: 0 0 295px;
+}
+
+.mx_LeftPanel_container_collapsed {
+    /* TagPanel 60px + Collapsed LeftPanel 60px */
+    flex: 0 0 120px;
 }
 
 .mx_LeftPanel_hideButton {
