Merge pull request #1074 from nextcloud-libraries/fix/a11y-on-small-s…

…creens
nextcloud-libraries · Oct 17, 2023 · eae05f7 · eae05f7
2 parents 4187c9a + 8b93e5e
commit eae05f7
Showing 1 changed file with 3 additions and 1 deletion.
diff --git a/lib/components/DialogBase.vue b/lib/components/DialogBase.vue
@@ -207,10 +207,12 @@ const modalProps = computed(() => ({
 	&__name {
 		// Same as the NcAppSettingsDialog
 		text-align: center;
-		height: var(--default-clickable-area);
+		// Should be the same height as the close button (but allow the heading to wrap in case of overflow)
 		min-height: var(--default-clickable-area);
 		line-height: var(--default-clickable-area);
 		margin-block: 4px 12px; // start = 4px to align with close button
+		// Make sure the close button does not overflow the title
+		margin-inline-end: calc(var(--default-clickable-area) + 4px);
 	}
 
 	&__content {