feat: add small mobile breakpoint

src/assets/variables.scss

@@ -55,6 +55,7 @@ $navigation-width: 300px;
 
 // mobile breakpoint
 $breakpoint-mobile: 1024px;
+$breakpoint-small-mobile: math.div($breakpoint-mobile, 2);
 
 // navigation spacing
 $app-navigation-settings-margin: 3px;

src/components/NcAppSidebar/NcAppSidebar.vue

@@ -1069,7 +1069,7 @@ $top-buttons-spacing: 6px;
 }
 
 // Make the sidebar full-width on small screens
-@media only screen and (max-width: 768px) {
+@media only screen and (max-width: $breakpoint-small-mobile) {
 	.app-sidebar {
 		width: 100vw;
 		max-width: 100vw;

src/components/NcDialog/NcDialog.vue

@@ -355,7 +355,7 @@ export default defineComponent({
 
 <style lang="scss">
 /** When having the small dialog style we override the modal styling so dialogs look more dialog like */
-@media only screen and (max-width: math.div($breakpoint-mobile, 2)) {
+@media only screen and (max-width: $breakpoint-small-mobile) {
 	.dialog__modal .modal-wrapper--small .modal-container {
 		width: fit-content;
 		height: unset;

src/components/NcHeaderMenu/NcHeaderMenu.vue

@@ -387,7 +387,7 @@ $externalMargin: 8px;
 	}
 }
 
-@media only screen and (max-width: math.div($breakpoint-mobile, 2)) {
+@media only screen and (max-width: $breakpoint-small-mobile) {
 	.header-menu {
 		width: $clickable-area;
 

src/components/NcModal/NcModal.vue

@@ -1022,7 +1022,7 @@ export default {
 	}
 
 	// Make modal full screen on mobile
-	@media only screen and (max-width: math.div($breakpoint-mobile, 2)) {
+	@media only screen and (max-width: $breakpoint-small-mobile) {
 		.modal-container {
 			max-width: initial;
 			width: 100%;

src/composables/useIsMobile/index.js

@@ -22,28 +22,40 @@
 
 import { readonly, ref } from 'vue'
 
-/**
- * The minimal width of the viewport to be considered a desktop device
- */
+/** The minimal width of the viewport for a desktop screen */
 export const MOBILE_BREAKPOINT = 1024
+/** The minimal width of the viewport for a small mobile screen, a half of the minimal desktop */
+export const MOBILE_SMALL_BREAKPOINT = MOBILE_BREAKPOINT / 2
 
-const checkIfIsMobile = () => document.documentElement.clientWidth < MOBILE_BREAKPOINT
+const isLessThanBreakpoint = (breakpoint) => document.documentElement.clientWidth < breakpoint
 
-const isMobile = ref(checkIfIsMobile())
+// Store the state of the viewport size in a module-scope to reuse between module's users
+const isMobile = ref(isLessThanBreakpoint(MOBILE_BREAKPOINT))
+const isSmallMobile = ref(isLessThanBreakpoint(MOBILE_SMALL_BREAKPOINT))
 
 window.addEventListener('resize', () => {
-	isMobile.value = checkIfIsMobile()
-})
+	isMobile.value = isLessThanBreakpoint(MOBILE_BREAKPOINT)
+	isSmallMobile.value = isLessThanBreakpoint(MOBILE_SMALL_BREAKPOINT)
+}, { passive: true })
 
 /**
- * Use global isMobile state, based on the viewport width
+ * Use global isMobile state
  *
- * @return {import('vue').DeepReadonly<import('vue').Ref<boolean>>}
+ * @return {import('vue').DeepReadonly<import('vue').Ref<boolean>>} Reactive flag for MOBILE_BREAKPOINT
  */
 export function useIsMobile() {
 	return readonly(isMobile)
 }
 
+/**
+ * Use global isSmallMobile state
+ *
+ * @return {import('vue').DeepReadonly<import('vue').Ref<boolean>>} Reactive flag for MOBILE_SMALL_BREAKPOINT
+ */
+export function useIsSmallMobile() {
+	return readonly(isSmallMobile)
+}
+
 /**
  * @deprecated Is to be removed in v9.0.0 with Vue 3 migration.
  *             Use `composables/useIsMobile` instead.