fix(settings): Fit media into post type (app discover section)

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
nextcloud · Mar 19, 2024 · e590626 · e590626
1 parent c0a9b59
commit e590626
Showing 1 changed file with 13 additions and 2 deletions.
diff --git a/apps/settings/src/components/AppStoreDiscover/PostType.vue b/apps/settings/src/components/AppStoreDiscover/PostType.vue
@@ -192,6 +192,7 @@ export default defineComponent({
 
 <style scoped lang="scss">
 .app-discover-post {
+	max-height: 300px;
 	width: 100%;
 	background-color: var(--color-primary-element-light);
 	border-radius: var(--border-radius-rounded);
@@ -210,15 +211,20 @@ export default defineComponent({
 
 	&__text {
 		display: block;
-		padding: var(--border-radius-rounded);
 		width: 100%;
+		padding: var(--border-radius-rounded);
+		overflow-y: scroll;
+	}
+
+	// If there is media next to the text we do not want a padding on the bottom as this looks weird when scrolling
+	&:has(&__media) &__text {
+		padding-block-end: 0;
 	}
 
 	&__media {
 		display: block;
 		overflow: hidden;
 
-		max-height: 300px;
 		max-width: 450px;
 		border-radius: var(--border-radius-rounded);
 
@@ -262,11 +268,16 @@ export default defineComponent({
 @media only screen and (max-width: 699px) {
 	.app-discover-post {
 		flex-direction: column;
+		max-height: 500px;
 
 		&--reverse {
 			flex-direction: column-reverse;
 		}
 
+		&__text {
+			flex: 1 1 50%;
+		}
+
 		&__media {
 			min-width: 100%;