From 00b45a2c7cb7a5adb718180965ed582cbda0af03 Mon Sep 17 00:00:00 2001
From: Michel Roux <xefir@crystalyx.net>
Date: Sun, 24 Dec 2023 10:58:37 +0100
Subject: [PATCH] fix banner on mobile

---
 src/components/Feed/Banner.vue | 49 ++++++++++++++++++++++------------
 1 file changed, 32 insertions(+), 17 deletions(-)

diff --git a/src/components/Feed/Banner.vue b/src/components/Feed/Banner.vue
index e802309..e8aa1d6 100644
--- a/src/components/Feed/Banner.vue
+++ b/src/components/Feed/Banner.vue
@@ -7,23 +7,25 @@
 				:is-no-user="true"
 				:size="128"
 				:url="imageUrl" />
-			<div class="infos">
-				<h2>{{ title }}</h2>
-				<a :href="link" target="_blank">
-					<i>{{ author }}</i>
-				</a>
-				<br><br>
-				<p>
-					<small>{{ description | stripHTML }}</small>
-				</p>
+			<div class="inner">
+				<div class="infos">
+					<h2>{{ title }}</h2>
+					<a :href="link" target="_blank">
+						<i>{{ author }}</i>
+					</a>
+					<br><br>
+					<p>
+						<small>{{ description | stripHTML }}</small>
+					</p>
+				</div>
+				<NcAppNavigationNew v-if="!isSubscribed"
+					:text="t('Subscribe')"
+					@click="addSubscription">
+					<template #icon>
+						<Plus :size="20" />
+					</template>
+				</NcAppNavigationNew>
 			</div>
-			<NcAppNavigationNew v-if="!isSubscribed"
-				:text="t('Subscribe')"
-				@click="addSubscription">
-				<template #icon>
-					<Plus :size="20" />
-				</template>
-			</NcAppNavigationNew>
 		</div>
 	</div>
 </template>
@@ -107,7 +109,6 @@ export default {
 		display: flex;
 		gap: 2rem;
 		height: 10rem;
-		overflow: auto;
 		position: relative;
 	}
 
@@ -117,4 +118,18 @@ export default {
 		padding: 2rem;
 		position: relative;
 	}
+
+	.infos {
+		overflow: auto;
+	}
+
+	.inner {
+		display: flex;
+	}
+
+	@media only screen and (max-width: 768px) {
+		.inner {
+			flex-direction: column;
+		}
+	}
 </style>