From 6dc7a5631b5ae32dae9a2259bedd22c33e523457 Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Fri, 10 Jul 2020 12:27:48 +0200
Subject: [PATCH] make tag panel less wide

---
 res/css/structures/_LeftPanel2.scss      |  2 +-
 res/css/structures/_TagPanel.scss        | 12 +++++-------
 src/components/views/elements/TagTile.js |  2 +-
 3 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/res/css/structures/_LeftPanel2.scss b/res/css/structures/_LeftPanel2.scss
index 94f80fe2b4..e88157c0aa 100644
--- a/res/css/structures/_LeftPanel2.scss
+++ b/res/css/structures/_LeftPanel2.scss
@@ -16,7 +16,7 @@ limitations under the License.
 
 // TODO: Rename on launch: https://github.com/vector-im/riot-web/issues/14231
 
-$tagPanelWidth: 70px; // only applies in this file, used for calculations
+$tagPanelWidth: 56px; // only applies in this file, used for calculations
 
 .mx_LeftPanel2 {
     background-color: $roomlist2-bg-color;
diff --git a/res/css/structures/_TagPanel.scss b/res/css/structures/_TagPanel.scss
index 1f8443e395..719bf692e6 100644
--- a/res/css/structures/_TagPanel.scss
+++ b/res/css/structures/_TagPanel.scss
@@ -33,7 +33,7 @@ limitations under the License.
 .mx_TagPanel .mx_TagPanel_clearButton_container {
     /* Constant height within flex mx_TagPanel */
     height: 70px;
-    width: 60px;
+    width: 56px;
 
     flex: none;
 
@@ -51,7 +51,7 @@ limitations under the License.
 
 .mx_TagPanel .mx_TagPanel_divider {
     height: 0px;
-    width: 42px;
+    width: 34px;
     border-bottom: 1px solid $panel-divider-color;
     display: none;
 }
@@ -69,12 +69,10 @@ limitations under the License.
     height: 100%;
 }
 .mx_TagPanel .mx_TagPanel_tagTileContainer > div {
-    height: 40px;
-    padding: 10px 0 9px 0;
+    margin: 8px 0;
 }
 
 .mx_TagPanel .mx_TagTile {
-    margin: 9px 0;
     // opacity: 0.5;
     position: relative;
 }
@@ -86,8 +84,8 @@ limitations under the License.
 
 .mx_TagPanel .mx_TagTile_plus {
     margin-bottom: 12px;
-    height: 40px;
-    width: 40px;
+    height: 32px;
+    width: 32px;
     border-radius: 20px;
     background-color: $roomheader-addroom-bg-color;
     position: relative;
diff --git a/src/components/views/elements/TagTile.js b/src/components/views/elements/TagTile.js
index 1af681dadc..70cdfb7120 100644
--- a/src/components/views/elements/TagTile.js
+++ b/src/components/views/elements/TagTile.js
@@ -130,7 +130,7 @@ export default createReactClass({
         const BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
         const profile = this.state.profile || {};
         const name = profile.name || this.props.tag;
-        const avatarHeight = 40;
+        const avatarHeight = 32;
 
         const httpUrl = profile.avatarUrl ? this.context.mxcUrlToHttp(
             profile.avatarUrl, avatarHeight, avatarHeight, "crop",