Merge pull request #7431 from nextcloud/app-content-list-fixes

App content list fixes

1 files changed, 54 insertions, 29 deletions

diff --git a/core/css/apps.scss b/core/css/apps.scss
index 54f0c476885..e6ead27e12b 100644
--- a/core/css/apps.scss
+++ b/core/css/apps.scss
@@ -910,42 +910,25 @@ kbd {
 
 #app-content-wrapper {
 	display: flex;
+	position: relative;
+	align-items: start;
+	height: 100%;
+	width: 100%;
+	.app-content-list,
+	.app-content-detail {
+		min-height: 100%;
+		max-height: 100%;
+		overflow-x: hidden;
+		overflow-y: auto;
+	}
 }
 .app-content-list {
 	width: 300px;
-	min-height: 100%;
-	overflow-x: hidden;
-	overflow-y: auto;
 	border-right: 1px solid nc-darken($color-main-background, 8%);
 	display: flex;
 	flex-direction: column;
 	transition: transform 250ms ease-in-out;
 
-	/* Icon fixes */
-	[class^='icon-'],
-	[class*=' icon-'] {
-		order: 4;
-		width: 24px;
-		height: 24px;
-		margin: -10px;
-		padding: 22px;
-		opacity: .3;
-		&:hover, &:focus {
-			opacity: .7;
-		}
-		&[class^='icon-star'],
-		&[class*=' icon-star'] {
-			opacity: .7;
-			&:hover, &:focus {
-				opacity: 1 ;
-			}
-
-		}
-		&.icon-starred {
-			opacity: 1 ;
-		}
-	}
-
 	/* Default item */
 	.app-content-list-item {
 		position: relative;
@@ -956,6 +939,36 @@ kbd {
 		display: flex;
 		flex-wrap: wrap;
 		align-items: center;
+		flex: 0 0 auto;
+
+		/* Icon fixes */
+		&,
+		> .app-content-list-item-menu {
+			> [class^='icon-'],
+			> [class*=' icon-'] {
+				order: 4;
+				width: 24px;
+				height: 24px;
+				margin: -10px;
+				padding: 22px;
+				opacity: .3;
+					cursor: pointer;
+				&:hover, &:focus {
+					opacity: .7;
+				}
+				&[class^='icon-star'],
+				&[class*=' icon-star'] {
+					opacity: .7;
+					&:hover, &:focus {
+						opacity: 1 ;
+					}
+
+				}
+				&.icon-starred {
+					opacity: 1 ;
+				}
+			}
+		}
 
 		&:hover, &:focus,
 		&.active {
@@ -1011,6 +1024,7 @@ kbd {
 			text-transform: capitalize;
 			object-fit: cover;
 			user-select: none;
+			cursor: pointer;
 		}
 
 		.app-content-list-item-line-one,
@@ -1023,6 +1037,7 @@ kbd {
 			order: 1;
 			flex: 1 1 0;
 			padding-right: 10px;
+			cursor: pointer;
 		}
 
 		.app-content-list-item-line-two {
@@ -1041,11 +1056,21 @@ kbd {
 			font-size: 80%;
 			user-select: none;
 		}
+
+		.app-content-list-item-menu {
+			order: 4;
+			position: relative;
+			.popovermenu {
+				margin: 0;
+				right: -5px;
+			}
+		}
 	}
 }
 /* App content */
 .app-content-detail {
-	width: 70%;
+	/* grow full width */
+	flex-grow: 1;
 
 	#app-navigation-toggle-back {
 		display: none;