diff --git a/core/css/apps.scss b/core/css/apps.scss
index 913e445f5b..f294f8aa51 100644
--- a/core/css/apps.scss
+++ b/core/css/apps.scss
@@ -1066,7 +1066,7 @@ $popovericon-size: 16px;
 
 /* CONTENT LIST ------------------------------------------------------------ */
 .app-content-list {
-	width: 300px;
+	max-width: 300px;
 	@include position('sticky');
 	top: $header-height;
 	border-right: 1px solid var(--color-border);
@@ -1077,7 +1077,7 @@ $popovericon-size: 16px;
 	max-height: calc(100vh - #{$header-height});
 	overflow-y: auto;
 	overflow-x: hidden;
-	flex: 0 0 300px;
+	flex: 0 1 300px;
 
 	/* Default item */
 	.app-content-list-item {
diff --git a/core/css/mobile.scss b/core/css/mobile.scss
index 44660e44c3..e4a4f53367 100644
--- a/core/css/mobile.scss
+++ b/core/css/mobile.scss
@@ -39,6 +39,8 @@
 		flex: 1 1 100%;
 		// make full height scroll since app-content-details is hidden
 		max-height: unset;
+		// ignore 300px default max width
+		max-width: 100%;
 		+ .app-content-details {
 			display: none;
 		}