diff --git a/app/components/TutorialsArticles.vue b/app/components/TutorialsArticles.vue
index 27de840e..31aca3a7 100644
--- a/app/components/TutorialsArticles.vue
+++ b/app/components/TutorialsArticles.vue
@@ -6,10 +6,10 @@ const props = defineProps<{
 	showMore?: boolean;
 }>();
 
-const { data: articles } = await useAsyncData(props.path + '-preview', () => {
-	const query = queryCollection('content')
-		.where('path', 'LIKE', `${props.path}/%`)
-		.select('title', 'description', 'icon', 'path', 'technologies');
+const { data: articles } = await useAsyncData(props.path + "-preview", () => {
+	const query = queryCollection("content")
+		.where("path", "LIKE", `${props.path}/%`)
+		.select("title", "description", "icon", "path", "technologies");
 
 	if (props.limit) {
 		query.limit(props.limit);
@@ -19,20 +19,15 @@ const { data: articles } = await useAsyncData(props.path + '-preview', () => {
 });
 
 const imageSrc = (article: { technologies?: string[] }) => {
-	const technologies = article?.technologies || ['directus'];
-	const techString = technologies.join(', ');
+	const technologies = article?.technologies || ["directus"];
+	const techString = technologies.join(", ");
 	return `/docs/api/tutorialimg?logos=${techString}`;
 };
 </script>
 
 <template>
-	<div
-		class="mt-8 gap-6 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3"
-	>
-		<template
-			v-for="article in articles"
-			:key="article.path"
-		>
+	<div class="mt-8 gap-6 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
+		<template v-for="article in articles" :key="article.path">
 			<UPageCard
 				v-if="article.title"
 				:to="article.path"
@@ -41,21 +36,24 @@ const imageSrc = (article: { technologies?: string[] }) => {
 					title: 'font-bold text-pretty',
 					description: 'line-clamp-2',
 					container: 'p-4 md:p-4 lg:p-4',
-
 				}"
-				class="hover:bg-primary/5 hover:ring-primary"
+				class="hover:bg-primary/5 hover:ring-primary overflow-hidden"
 			>
-				<div class="">
+				<div class="overflow-hidden">
 					<img
 						class="mb-0 max-h-36 w-full object-cover dark:brightness-90 rounded"
 						:src="imageSrc(article)"
 						alt="Generated Image"
-					>
-					<div class="col-span-2">
-						<ProseP class="text-gray-900 dark:text-white text-base truncate font-bold text-pretty">
+					/>
+					<div class="col-span-2 min-w-0">
+						<ProseP
+							class="text-gray-900 dark:text-white text-base font-bold text-pretty break-words line-clamp-2"
+						>
 							{{ article.title }}
 						</ProseP>
-						<ProseP class="text-[15px] text-gray-500 dark:text-gray-400 mt-1 line-clamp-2">
+						<ProseP
+							class="text-[15px] text-gray-500 dark:text-gray-400 mt-1 line-clamp-2 break-words"
+						>
 							{{ article.description }}
 						</ProseP>
 					</div>