style(TopBar): fit two-lines with default line height, reduce descrip…

…tion font size Signed-off-by: Maksim Sukharev <[email protected]>
nextcloud · Aug 1, 2024 · 52428e9 · 52428e9
1 parent 87d64d6
commit 52428e9
Showing 1 changed file with 9 additions and 6 deletions.
diff --git a/src/components/TopBar/TopBar.vue b/src/components/TopBar/TopBar.vue
@@ -299,17 +299,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));
+	padding-inline: calc(2 * var(--default-grid-baseline)) calc(2 * var(--default-grid-baseline) + var(--app-sidebar-offset));
 	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);
@@ -346,8 +350,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);
 		}
@@ -358,6 +360,7 @@ export default {
 		text-overflow: ellipsis;
 	}
 	.description {
+		font-size: var(--font-size-small, 15px);
 		overflow: hidden;
 		text-overflow: ellipsis;
 		max-width: fit-content;