Merge pull request RocketChat#167 from WideChat/ear_toolbar_layout

fix toolbar layout when multiple icons are visible
shubhsherl · Feb 26, 2020 · 89559c4 · 89559c4
2 parents e26f6e8 + bb65607
commit 89559c4
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 6 deletions.
diff --git a/app/theme/client/imports/components/header.css b/app/theme/client/imports/components/header.css
@@ -421,11 +421,24 @@
 			display: none;
 		}
 
-		&__first-icon {
-			width: 2.25em;
-
+		&__block {
 			margin: 0 0.2em;
 
+			padding: 0 0.1em;
+		}
+
+		&__section {
+			display: flex;
+
+			margin: 0 0.5rem;
+
+			padding: 0 0.5rem;
+
+			align-items: center;
+		}
+
+		&__first-icon {
+			width: 2.25em;
 			padding: 0;
 		}
 
@@ -451,8 +464,6 @@
 		}
 
 		&__search-button {
-			margin-right: -0.75em;
-
 			&__action {
 				&__icon {
 					height: 1.2em;
@@ -475,6 +486,7 @@
 			display: flex;
 
 			margin: 0;
+
 			padding: 0;
 		}
 	}

diff --git a/app/ui/client/components/header/header.html b/app/ui/client/components/header/header.html
@@ -8,7 +8,7 @@
 			{{#if rawSectionName}}
 				<span class="rc-header__block">{{rawSectionName}}</span>
 			{{else}}
-				<span class="rc-header__block">{{_ sectionName}}</span>
+				<span class="rc-header__block rc-header__section">{{_ sectionName}}</span>
 			{{/if}}
 
 			{{#if Template.contentBlock}}