From 331843bf02046cf66bb3c4fa829ad8a96d5937f4 Mon Sep 17 00:00:00 2001
From: Sachsenspielt <sachsenspielt3@gmail.com>
Date: Sun, 2 Jul 2023 19:18:54 +0200
Subject: [PATCH] fix: some wrapping issues fixed

---
 src/components/News/ArticlePreview.svelte  |  2 +-
 src/components/News/MetadataDisplay.svelte | 20 +++++++++++---------
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/components/News/ArticlePreview.svelte b/src/components/News/ArticlePreview.svelte
index ce59769..bd0ad28 100644
--- a/src/components/News/ArticlePreview.svelte
+++ b/src/components/News/ArticlePreview.svelte
@@ -17,7 +17,7 @@
 		class="h-full w-full rounded-[30px] object-cover"
 	/>
 	<div class="absolute right-0 top-0 flex h-full w-full items-end justify-end leading-tight">
-		<div class="flex w-full flex-col items-end rounded-b-[30px] bg-[#00000033] p-4 leading-tight">
+		<div class="flex w-full flex-col text-right items-end rounded-b-[30px] bg-[#00000033] p-2 sm:p-4 leading-tight">
 			<span class="text-right font-bold">{article.title}</span>
 			<MetadataDisplay icon={faUser} text={article.author} />
 			<MetadataDisplay icon={faCalendarDays} text={article.createdAt.toLocaleDateString()} />
diff --git a/src/components/News/MetadataDisplay.svelte b/src/components/News/MetadataDisplay.svelte
index caeef63..fdd46f2 100644
--- a/src/components/News/MetadataDisplay.svelte
+++ b/src/components/News/MetadataDisplay.svelte
@@ -1,20 +1,22 @@
 <script lang="ts">
-	import { Icon } from 'svelte-awesome';
-	import type { IconDefinition } from '@fortawesome/free-solid-svg-icons';
+	import { Icon } from "svelte-awesome";
+	import type { IconDefinition } from "@fortawesome/free-solid-svg-icons";
 
 	export let icon: IconDefinition;
 	export let text: string;
 	export let href: string;
 </script>
 
-<div class="flex items-center gap-2">
+<div class="flex items-center justify-end gap-2 text-right">
 	<Icon data={icon} />
 
-	{#if href}
-		<a {href} target="_blank">
+	<div class="w-max">
+		{#if href}
+			<a {href} target="_blank">
+				<span>{text}</span>
+			</a>
+		{:else}
 			<span>{text}</span>
-		</a>
-	{:else}
-		<span>{text}</span>
-	{/if}
+		{/if}
+	</div>
 </div>