From fc30a70b73b773beda864279acc2db41bcf10bd8 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Thu, 1 Aug 2024 09:54:12 +0200
Subject: [PATCH] style(TopBar): fit two-lines with default line height, reduce
 description font size

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 src/components/TopBar/TopBar.vue | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/components/TopBar/TopBar.vue b/src/components/TopBar/TopBar.vue
index e945fdc55e8..c524e28f912 100644
--- a/src/components/TopBar/TopBar.vue
+++ b/src/components/TopBar/TopBar.vue
@@ -303,17 +303,21 @@ export default {
 
 <style lang="scss" scoped>
 .top-bar {
+	--border-width: 1px;
+	// hardcoded 1.5 value of line-height for compatibility with older versions
+	--text-height: calc(1.5 * (var(--default-font-size) + var(--font-size-small, 15px)));
 	display: flex;
 	flex-wrap: wrap;
 	z-index: 10;
 	gap: 3px;
-	align-items: flex-start;
+	align-items: center;
 	justify-content: flex-end;
-	padding: calc(2 * var(--default-grid-baseline));
+	min-height: calc(2 * var(--default-grid-baseline) + var(--text-height) + var(--border-width));
+	padding-block: var(--default-grid-baseline);
 	// Reserve space for the sidebar toggle button
-	padding-right: calc(2 * var(--default-grid-baseline) + var(--app-sidebar-offset, 0));
+	padding-inline: calc(2 * var(--default-grid-baseline)) calc(2 * var(--default-grid-baseline) + var(--app-sidebar-offset, 0));
 	background-color: var(--color-main-background);
-	border-bottom: 1px solid var(--color-border);
+	border-bottom: var(--border-width) solid var(--color-border);
 
 	.talk-sidebar-callview & {
 		margin-right: var(--default-clickable-area);
@@ -358,8 +362,6 @@ export default {
 		justify-content: center;
 		width: 100%;
 		overflow: hidden;
-		min-height: var(--default-clickable-area);
-		line-height: calc(var(--default-clickable-area) / 2);
 		&--offline {
 			color: var(--color-text-maxcontrast);
 		}
@@ -370,6 +372,7 @@ export default {
 		text-overflow: ellipsis;
 	}
 	.description {
+		font-size: var(--font-size-small, 15px);
 		overflow: hidden;
 		text-overflow: ellipsis;
 		max-width: fit-content;