Merge pull request #44286 from nextcloud/fix/app-discover-media-size

fix(settings): Ensure media for app discover section is scaled correctly

apps/settings/src/components/AppStoreDiscover/AppStoreDiscoverSection.vue

@@ -64,6 +64,11 @@ const shuffleArray = <T, >(array: T[]): T[] => {
 onBeforeMount(async () => {
 	try {
 		const { data } = await axios.get<Record<string, unknown>[]>(generateUrl('/settings/api/apps/discover'))
+		if (data.length === 0) {
+			logger.info('No app discover elements available (empty response)')
+			hasError.value = true
+			return
+		}
 		// Parse data to ensure dates are useable and then filter out expired or future elements
 		const parsedElements = data.map(parseApiResponse).filter(filterElements)
 		// Shuffle elements to make it looks more interesting

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%;