CSS: adjust media query breakpoint to improve tablet readability (#15199)

CSS: adjust media query breakpoint to improve tablet readability

apps/files/css/mobile.scss

@@ -1,7 +1,8 @@
 /* 938 = table min-width(688) + app-navigation width: 250
-   769 = size where app-navigation (768) is hidden +1
+   $breakpoint-mobile +1 = size where app-navigation is hidden +1
    688 = table min-width */
-@media only screen and (max-width: 938px) and (min-width: 769px), only screen and (max-width: 688px) {
+$min-table-width: 688px;
+@media only screen and (max-width: $min-table-width + $navigation-width) and (min-width: $breakpoint-mobile + 1), only screen and (max-width: $min-table-width) {
 
 .app-files #app-content.dir-drop{
 	background-color: rgba(255, 255, 255, 1)!important;

apps/files_sharing/css/public.scss

@@ -195,7 +195,7 @@ thead {
 
 // hide the download entry on the menu
 // on public share when NOT on mobile
-@media only screen and (min-width: 769px) {
+@media only screen and (min-width: $mobile_breakpoint + 1) {
 	#body-public {
 		.header-right {
 			#header-actions-menu {

core/css/apps.scss

@@ -592,7 +592,7 @@ kbd {
 
 /**
  * !Important. We are defining the minimum requirement we want for flex
- * Just before the mobile breakpoint we have $breakpoint-mobile (768px) - $navigation-width
+ * Just before the mobile breakpoint we have $breakpoint-mobile (1024px) - $navigation-width
  * -> 468px. In that case we want 200px for the list and 268px for the content
  */
 $min-content-width: $breakpoint-mobile - $navigation-width - $list-min-width;

core/css/variables.scss

@@ -92,5 +92,5 @@ $sidebar-max-width: 500px;
 $list-min-width: 200px;
 $list-max-width: 300px;
 
-// mobile
-$breakpoint-mobile: 768px;
+// mobile. Keep in sync with core/js/js.js
+$breakpoint-mobile: 1024px;

core/src/init.js

@@ -30,6 +30,9 @@ import {setUp as setUpMainMenu} from './components/MainMenu'
 import {setUp as setUpUserMenu} from './components/UserMenu'
 import PasswordConfirmation from './OC/password-confirmation'
 
+// keep in sync with core/css/variables.scss
+const breakpoint_mobile_width = 1024;
+
 const resizeMenu = () => {
 	const appList = $('#appmenu li')
 	const rightHeaderWidth = $('.header-right').outerWidth()
@@ -37,7 +40,7 @@ const resizeMenu = () => {
 	const usePercentualAppMenuLimit = 0.33
 	const minAppsDesktop = 8
 	let availableWidth = headerWidth - $('#nextcloud').outerWidth() - (rightHeaderWidth > 210 ? rightHeaderWidth : 210)
-	const isMobile = $(window).width() < 768
+	const isMobile = $(window).width() < breakpoint_mobile_width
 	if (!isMobile) {
 		availableWidth = availableWidth * usePercentualAppMenuLimit
 	}
@@ -279,7 +282,7 @@ export const initCore = () => {
 		}
 
 		const toggleSnapperOnSize = () => {
-			if ($(window).width() > 768) {
+			if ($(window).width() > breakpoint_mobile_width) {
 				snapper.close()
 				snapper.disable()