From 295b7cbc1a465a0a4ef3756667835b5eb9cf9d52 Mon Sep 17 00:00:00 2001
From: "Grigorii K. Shartsev" <me@shgk.me>
Date: Fri, 15 Mar 2024 19:32:55 +0100
Subject: [PATCH] fix(settings): apps list layout on mobile

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
---
 apps/settings/src/components/AppList.vue         | 7 +++++--
 apps/settings/src/components/AppList/AppItem.vue | 2 +-
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/apps/settings/src/components/AppList.vue b/apps/settings/src/components/AppList.vue
index 33fb2c725f0..80f999824b6 100644
--- a/apps/settings/src/components/AppList.vue
+++ b/apps/settings/src/components/AppList.vue
@@ -21,8 +21,8 @@
   -->
 
 <template>
-	<div id="app-content-inner">
-		<div id="apps-list" class="apps-list" :class="{installed: (useBundleView || useListView), store: useAppStoreView}">
+	<div id="app-content-inner" class="{ 'with-app-sidebar': !!selectedApp }">
+		<div id="apps-list" class="apps-list" :class="{installed: (useBundleView || useListView), store: useAppStoreView }">
 			<template v-if="useListView">
 				<div v-if="showUpdateAll" class="toolbar">
 					{{ n('settings', '%n app has an update available', '%n apps have an update available', counter) }}
@@ -237,6 +237,9 @@ export default {
 					return false
 				})
 		},
+		selectedApp() {
+			return this.apps.find(app => app.id === this.$route.params.id)
+		},
 		useAppStoreView() {
 			return !this.useListView && !this.useBundleView
 		},
diff --git a/apps/settings/src/components/AppList/AppItem.vue b/apps/settings/src/components/AppList/AppItem.vue
index fb8f4f6b30b..ecb03f655d4 100644
--- a/apps/settings/src/components/AppList/AppItem.vue
+++ b/apps/settings/src/components/AppList/AppItem.vue
@@ -73,7 +73,7 @@
 			<span v-else-if="app.appstoreData.releases[0].version">{{ app.appstoreData.releases[0].version }}</span>
 		</component>
 
-		<component :is="dataItemTag" :headers="getDataItemHeaders(`app-table-col-level`)">
+		<component :is="dataItemTag" :headers="getDataItemHeaders(`app-table-col-level`)" class="app-level">
 			<AppLevelBadge :level="app.level" />
 			<AppScore v-if="hasRating && !listView" :score="app.score" />
 		</component>