From e5906267ff73a438ae2f428e05dd58f5e8068449 Mon Sep 17 00:00:00 2001
From: Ferdinand Thiessen <opensource@fthiessen.de>
Date: Mon, 18 Mar 2024 19:07:35 +0100
Subject: [PATCH] fix(settings): Fit media into post type (app discover
 section)

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
---
 .../src/components/AppStoreDiscover/PostType.vue  | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/apps/settings/src/components/AppStoreDiscover/PostType.vue b/apps/settings/src/components/AppStoreDiscover/PostType.vue
index df4755483f8..626e4e80fe5 100644
--- 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%;