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

Fix breakpoint and shrinking of the content + list

apps/files_sharing/css/mobile.scss

-@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 {

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 {

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 {

core/css/mobile.scss

-@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 */

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;

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%;
 	}

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(