Merge pull request #12875 from nextcloud/fix/top-bar--line-height

fix(TopBar): align lines
nextcloud · Aug 6, 2024 · 9acebc2 · 9acebc2
2 parents 0cc3e49 + 3ad15eb
commit 9acebc2
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 6 deletions.
diff --git a/src/components/CallView/CallView.vue b/src/components/CallView/CallView.vue
@@ -737,8 +737,8 @@ export default {
 #videos {
 	position: absolute;
 	width: 100%;
-	height: calc(100% - 60px);
-	top: 60px;
+	height: calc(100% - 50px);
+	top: 50px;
 	overflow: hidden;
 	display: -webkit-box;
 	display: -moz-box;

diff --git a/src/components/TopBar/TopBar.vue b/src/components/TopBar/TopBar.vue
@@ -303,15 +303,13 @@ 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: center;
 	justify-content: flex-end;
-	min-height: calc(2 * var(--default-grid-baseline) + var(--text-height) + var(--border-width));
+	min-height: calc(var(--border-width) + 2 * (2 * var(--default-grid-baseline)) + var(--default-clickable-area));
 	padding-block: var(--default-grid-baseline);
 	// Reserve space for the sidebar toggle button
 	padding-inline: calc(2 * var(--default-grid-baseline)) calc(2 * var(--default-grid-baseline) + var(--app-sidebar-offset, 0));
@@ -361,6 +359,8 @@ export default {
 		justify-content: center;
 		width: 100%;
 		overflow: hidden;
+		// Text is guaranteed to be one line. Make line-height 1.2 to fit top bar
+		line-height: 1.2;
 		&--offline {
 			color: var(--color-text-maxcontrast);
 		}
@@ -371,7 +371,6 @@ export default {
 		text-overflow: ellipsis;
 	}
 	.description {
-		font-size: var(--font-size-small, 15px);
 		overflow: hidden;
 		text-overflow: ellipsis;
 		max-width: fit-content;