fix: some wrapping issues fixed

Cubyx-Network · Jul 2, 2023 · 331843b · 331843b
1 parent 62b47fd
commit 331843b
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 10 deletions.
diff --git 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
@@ -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>