Merge pull request #8543 from nextcloud-libraries/backport/8520/stable8

ShGKme · web-flow · commit 268f0e0c1451 · 2026-05-18T00:20:09.000+02:00
[stable8] fix: use correct boundaries of CSS breakpoints
diff --git a/src/components/NcAppNavigation/NcAppNavigation.vue b/src/components/NcAppNavigation/NcAppNavigation.vue
@@ -463,7 +463,7 @@ export default {
 }
 
 // When on mobile, we make the navigation slide over the NcAppContent
-@media only screen and (max-width: $breakpoint-mobile) {
+@media only screen and (width < $breakpoint-mobile) {
 	.app-navigation {
 		position: absolute;
 		border-inline-end: 1px solid var(--color-border);
diff --git a/src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue b/src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue
@@ -391,7 +391,7 @@ $content-inset: calc(3 * var(--default-grid-baseline));
 	box-sizing: border-box;
 }
 
-@media only screen and (max-width: $breakpoint-mobile) {
+@media only screen and (width < $breakpoint-mobile) {
 	.app-settings:not(.app-settings--legacy) {
 		:deep(.modal-wrapper .modal-container) {
 			padding-inline-start: 12px !important;

Original file line number	Diff line number	Diff line change
`@@ -463,7 +463,7 @@ export default {`
`463`	`463`	`}`
`464`	`464`
`465`	`465`	`// When on mobile, we make the navigation slide over the NcAppContent`
`466`		`-@media only screen and (max-width: $breakpoint-mobile) {`
	`466`	`+@media only screen and (width < $breakpoint-mobile) {`
`467`	`467`	`.app-navigation {`
`468`	`468`	`position: absolute;`
`469`	`469`	`border-inline-end: 1px solid var(--color-border);`
Original file line number	Diff line number	Diff line change
`@@ -391,7 +391,7 @@ $content-inset: calc(3 * var(--default-grid-baseline));`
`391`	`391`	`box-sizing: border-box;`
`392`	`392`	`}`
`393`	`393`
`394`		`-@media only screen and (max-width: $breakpoint-mobile) {`
	`394`	`+@media only screen and (width < $breakpoint-mobile) {`
`395`	`395`	`.app-settings:not(.app-settings--legacy) {`
`396`	`396`	`:deep(.modal-wrapper .modal-container) {`
`397`	`397`	`padding-inline-start: 12px !important;`