Merge pull request #12454 from nextcloud/list-shrink-fix

Fix breakpoint and shrinking of the content + list

7 files changed, 23 insertions, 9 deletions

diff --git a/apps/files_sharing/css/mobile.scss b/apps/files_sharing/css/mobile.scss
index 3aaa5718cab..0202fdd08d1 100644
--- a/apps/files_sharing/css/mobile.scss
+++ b/apps/files_sharing/css/mobile.scss
@@ -1,4 +1,4 @@
-@media only screen and (max-width: 768px) {
+@media only screen and (max-width: $breakpoint-mobile) {
 
 /* make header scroll up for single shares, more view of content on small screens */
 #header.share-file {
diff --git a/apps/files_sharing/css/public.scss b/apps/files_sharing/css/public.scss
index c31b4f82bed..9d752115c59 100644
--- a/apps/files_sharing/css/public.scss
+++ b/apps/files_sharing/css/public.scss
@@ -207,7 +207,7 @@ thead {
 }
 
 // hide the primary on public share on mobile
-@media only screen and (max-width: 768px) {
+@media only screen and (max-width: $breakpoint-mobile) {
 	#body-public {
 		.header-right {
 			#header-primary-action {
diff --git a/core/css/apps.scss b/core/css/apps.scss
index b7afc19705d..039374bf726 100644
--- a/core/css/apps.scss
+++ b/core/css/apps.scss
@@ -599,6 +599,14 @@ kbd {
 
 /* APP-CONTENT AND WRAPPER ------------------------------------------ */
 /* Part where the content will be loaded into */
+
+/**
+ * !Important. We are defining the minimum requirement we want for flex
+ * Just before the mobile breakpoint we have $breakpoint-mobile (768px) - $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;
+
 #app-content {
 	z-index: 1000;
 	background-color: var(--color-main-background);
@@ -626,7 +634,7 @@ kbd {
 		/* CONTENT DETAILS AFTER LIST*/
 		.app-content-details {
 			/* grow full width */
-			flex-grow: 1;
+			flex: 1 1 $min-content-width;
 			#app-navigation-toggle-back {
 				display: none;
 			}
@@ -1100,7 +1108,6 @@ $popovericon-size: 16px;
 
 /* CONTENT LIST ------------------------------------------------------------ */
 .app-content-list {
-	max-width: 300px;
 	@include position('sticky');
 	top: $header-height;
 	border-right: 1px solid var(--color-border);
@@ -1111,7 +1118,9 @@ $popovericon-size: 16px;
 	max-height: calc(100vh - #{$header-height});
 	overflow-y: auto;
 	overflow-x: hidden;
-	flex: 0 1 300px;
+	flex: 1 1 $list-min-width;
+	min-width: $list-min-width;
+	max-width: $list-max-width;
 
 	/* Default item */
 	.app-content-list-item {
diff --git a/core/css/mobile.scss b/core/css/mobile.scss
index f7f3827eba5..3e21672df82 100644
--- a/core/css/mobile.scss
+++ b/core/css/mobile.scss
@@ -1,4 +1,4 @@
-@media only screen and (max-width: 768px) {
+@media only screen and (max-width: $breakpoint-mobile) {
 
 	/* position share dropdown */
 	#dropdown {
@@ -114,7 +114,7 @@
 		display: none;
 	}
 	#body-settings #controls {
-		min-width: 768px !important;
+		min-width: $breakpoint-mobile !important;
 	}
 
 	/* do not show dates in filepicker */
diff --git a/core/css/variables.scss b/core/css/variables.scss
index a827629479c..2ec9ba333b4 100644
--- a/core/css/variables.scss
+++ b/core/css/variables.scss
@@ -87,3 +87,8 @@ $header-height: 50px;
 $navigation-width: 300px;
 $sidebar-min-width: 300px;
 $sidebar-max-width: 500px;
+$list-min-width: 200px;
+$list-max-width: 300px;
+
+// mobile
+$breakpoint-mobile: 768px;
diff --git a/settings/css/settings.scss b/settings/css/settings.scss
index a7dbe0e7d8f..be1c6a08b68 100644
--- a/settings/css/settings.scss
+++ b/settings/css/settings.scss
@@ -905,7 +905,7 @@ span.version {
 	}
 }
 
-@media only screen and (max-width: 768px) {
+@media only screen and (max-width: $breakpoint-mobile) {
 	.store .section {
 		width: 50%;
 	}
diff --git a/tests/acceptance/features/bootstrap/FilesSharingAppContext.php b/tests/acceptance/features/bootstrap/FilesSharingAppContext.php
index fc589a84ac6..4be1ddf22c1 100644
--- a/tests/acceptance/features/bootstrap/FilesSharingAppContext.php
+++ b/tests/acceptance/features/bootstrap/FilesSharingAppContext.php
@@ -198,7 +198,7 @@ class FilesSharingAppContext implements Context, ActorAwareInterface {
 			PHPUnit_Framework_Assert::fail("The Share menu is not visible yet after $timeout seconds");
 		}
 
-		// The acceptance tests are run in a window wider than 768px, so the
+		// The acceptance tests are run in a window wider than the mobile breakpoint, so the
 		// download item should not be shown in the menu (although it will be in
 		// the DOM).
 		PHPUnit_Framework_Assert::assertFalse(