refactor(ui): introduce variable for the mobile breakpoint

Signed-off-by: Christoph Wurst <[email protected]>

Author: ChristophWurst

css/variables.scss

@@ -0,0 +1,6 @@
+/**
+ * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+$breakpoint-mobile: 1024px;

src/components/ComposerSessionIndicator.vue

@@ -97,6 +97,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@use '../../css/variables';
+
 .composer-session {
 	position: fixed;
 	bottom: calc(var(--body-container-margin) + var(--default-grid-baseline));
@@ -114,7 +116,7 @@ export default {
 	border-radius: var(--body-container-radius);
 
 	// Mobile
-	@media (max-width: 1024px) {
+	@media (max-width: #{variables.$breakpoint-mobile}) {
 		width: calc(100% - 2 * var(--default-grid-baseline));
 		height: 44px;
 		border-radius: var(--border-radius-pill);

src/components/Message.vue

@@ -173,6 +173,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@use '../../css/variables';
+
 .v-popover > .trigger > .action-item {
 	border-radius: 22px;
 	background-color: var(--color-background-darker);
@@ -233,7 +235,7 @@ export default {
 		margin-inline-start: auto;
 	}
 
-	@media (max-width: var(--breakpoint-mobile)) {
+	@media (max-width: #{variables.$breakpoint-mobile}) {
         margin-inline: calc(var(--default-grid-baseline) * 3);
     }
 }

src/components/MessageAttachment.vue

@@ -260,8 +260,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@use '../../css/variables';
 
-@media screen and (max-width: 1024px) {
+@media screen and (max-width: #{variables.$breakpoint-mobile}) {
 	.attachment{
 		width: 100% !important;
 	}

src/components/MessageAttachments.vue

@@ -216,6 +216,8 @@ export default {
 </script>
 
 <style lang="scss">
+@use '../../css/variables';
+
 .attachments {
 	width: 100%;
     box-sizing: border-box;
@@ -294,8 +296,7 @@ export default {
 	bottom: -2px;
 	background: linear-gradient(0deg, var(--color-main-background), var(--color-main-background) 90%, rgba(255, 255, 255, 0));
 
-
-	@media (max-width: var(--breakpoint-mobile)) {
+	@media (max-width: #{variables.$breakpoint-mobile}) {
         padding: 10px 12px 10px 12px;
     }
 }

src/components/MessageLoadingSkeleton.vue

@@ -35,6 +35,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@use '../../css/variables';
 
 /* skeleton */
 .message-loading-skeleton {
@@ -99,7 +100,7 @@ export default {
 	 }
 }
 
-@media only screen and (max-width: 1024px) {
+@media only screen and (max-width: #{variables.$breakpoint-mobile}) {
     .message-loading-skeleton__body {
         margin-inline-start: 12px;
     }

src/components/NewMessageModal.vue

@@ -643,6 +643,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@use '../../css/variables';
+
 @media only screen and (max-width: 600px) {
 	:deep(.modal-container) {
 		max-width: 80%;
@@ -695,7 +697,7 @@ export default {
 	overflow-y: auto;
 	padding-inline-start: 5px;
 	border-inline-start: 1px solid var(--color-text-maxcontrast);
-	@media (max-width: 1024px) {
+	@media (max-width: #{variables.$breakpoint-mobile}) {
 		display: none;
 	}
 }

src/components/PhishingWarning.vue

@@ -68,6 +68,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@use '../../css/variables';
+
 .phishing-warning {
 	background-color: rgba(var(--color-warning-rgb), 0.2);
 	border-radius: var(--border-radius-element);
@@ -94,7 +96,7 @@ export default {
 		}
     }
 
-	@media (max-width: 1024px) {
+	@media (max-width: #{variables.$breakpoint-mobile}) {
 		margin-inline-start: calc(var(--default-grid-baseline) * 3);
 	}
 }

src/components/Thread.vue

@@ -580,6 +580,8 @@ export default {
 </script>
 
 <style lang="scss">
+@use '../../css/variables';
+
 #mail-message {
 	width: 100%;
 	max-width: 100%;
@@ -631,7 +633,7 @@ export default {
 	}
 }
 
-@media only screen and (max-width: 1024px) {
+@media only screen and (max-width: #{variables.$breakpoint-mobile}) {
     #mail-thread-header {
         position: sticky !important;
         top: 29px !important;
@@ -669,13 +671,13 @@ export default {
 	}
 }
 
-@media only screen and (max-width: 1024px) {
+@media only screen and (max-width: #{variables.$breakpoint-mobile}) {
     #mail-thread-header-fields {
         padding-inline-start: 48px;
     }
 }
 
-@media only screen and (max-width: 1024px) {
+@media only screen and (max-width: #{variables.$breakpoint-mobile}) {
 	#mail-thread-header-fields {
 		margin-top: -32px;
 	}
@@ -695,7 +697,7 @@ export default {
 	margin: calc(var(--default-grid-baseline) * 2) calc(var(--default-grid-baseline) * 10) 0 calc(var(--default-grid-baseline) * 14);
 }
 
-@media only screen and (max-width: var(--breakpoint-mobile)) {
+@media only screen and (max-width: #{variables.$breakpoint-mobile}) {
     #mail-content {
         margin: calc(var(--default-grid-baseline) * 2) calc(var(--default-grid-baseline) * 3) 0 calc(var(--default-grid-baseline) * 3);
     }