Fix my-apps view on mobile

Signed-off-by: Simon L <szaimen@e.mail.de>
nextcloud · Oct 12, 2023 · 52e4c7a · 52e4c7a
1 parent 03c7ee4
commit 52e4c7a
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 8 deletions.
diff --git a/apps/settings/css/settings.scss b/apps/settings/css/settings.scss
@@ -2,7 +2,8 @@
  This file is licensed under the Affero General Public License version 3 or later.
  See the COPYING-README file. */
 @use 'variables';
-@import 'functions';
+@use 'sass:math';
+@import 'functions';	
 
 input {
 	&#openid, &#webdav {
@@ -914,6 +915,7 @@ span.version {
 			display: table;
 			width: 100%;
 			height: auto;
+			white-space: normal;
 		}
 
 		margin-bottom: 100px;
@@ -933,6 +935,13 @@ span.version {
 				box-sizing: border-box;
 			}
 
+			> .actions {
+				display: flex;
+				gap: 8px;
+				flex-wrap: wrap;
+				justify-content: end;
+			}
+
 			&.selected {
 				background-color: var(--color-background-dark);
 			}
@@ -1061,6 +1070,13 @@ span.version {
 	}
 }
 
+// Display buttons above each other on mobile
+@media (max-width: math.div(1024px, 2)) {
+	.apps-list.installed .section > .actions {
+		display: table-cell;
+	}
+}
+
 #apps-list-search {
 	.section {
 		h2 {

diff --git a/apps/settings/src/components/AppList/AppItem.vue b/apps/settings/src/components/AppList/AppItem.vue
@@ -209,14 +209,8 @@ export default {
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 	.app-icon {
 		filter: var(--background-invert-if-bright);
 	}
-	.actions {
-		display: flex !important;
-		gap: 8px;
-		flex-wrap: wrap;
-		justify-content: end;
-	}
 </style>