Merge pull request #10561 from nextcloud/fix/10476/applist-layout

Fixes the apps list layout

settings/css/settings.scss

@@ -909,9 +909,16 @@ span.version {
 		width: 50%;
 	}
 }
+
+@media only screen and (max-width: 480px) {
+	.store .section {
+		width: 100%;
+	}
+}
+
 /* hide app version and level on narrower screens */
 @media only screen and (max-width: 900px) {
-	#apps-list.installed {
+	.apps-list.installed {
 		.app-version, .app-level {
 			display: none !important;
 		}
@@ -919,7 +926,7 @@ span.version {
 }
 
 @media only screen and (max-width: 500px) {
-	#apps-list.installed .app-groups {
+	.apps-list.installed .app-groups {
 		display: none !important;
 	}
 }
@@ -1000,8 +1007,7 @@ span.version {
 	list-style-position: inside;
 }
 
-
-#apps-list, #apps-list-search {
+.apps-list {
 	.section {
 		cursor: pointer;
 	}
@@ -1134,6 +1140,14 @@ span.version {
 	}
 }
 
+#apps-list-search {
+	.section {
+		h2 {
+			margin-bottom: 0;
+		}
+	}
+}
+
 /* LOG */
 #log {
 	white-space: normal;

settings/src/components/appList.vue

@@ -22,7 +22,7 @@
 
 <template>
 	<div id="app-content-inner">
-		<div id="apps-list" :class="{installed: (useBundleView || useListView), store: useAppStoreView}">
+		<div id="apps-list" class="apps-list" :class="{installed: (useBundleView || useListView), store: useAppStoreView}">
 			<template v-if="useListView">
 				<transition-group name="app-list" tag="div" class="apps-list-container">
 					<app-item v-for="app in apps" :key="app.id" :app="app" :category="category" />
@@ -48,14 +48,18 @@
 
 		</div>
 
-		<div id="apps-list-search" class="installed">
-			<template v-if="search !== '' && searchApps.length > 0">
-				<div class="section">
-					<div></div>
-					<h2>{{ t('settings', 'Results from other categories') }}</h2>
-				</div>
-				<app-item v-for="app in searchApps" :key="app.id" :app="app" :category="category" :list-view="true" />
-			</template>
+		<div id="apps-list-search" class="apps-list installed">
+			<div class="apps-list-container">
+				<template v-if="search !== '' && searchApps.length > 0">
+					<div class="section">
+						<div></div>
+						<td colspan="5">
+							<h2>{{ t('settings', 'Results from other categories') }}</h2>
+						</td>
+					</div>
+					<app-item v-for="app in searchApps" :key="app.id" :app="app" :category="category" :list-view="true" />
+				</template>
+			</div>
 		</div>
 
 		<div id="apps-list-empty" class="emptycontent emptycontent-search" v-if="!loading && searchApps.length === 0 && apps.length === 0">