diff --git a/src/components/ArticleSnippet.astro b/src/components/ArticleSnippet.astro
index e41071b..a538a7f 100644
--- a/src/components/ArticleSnippet.astro
+++ b/src/components/ArticleSnippet.astro
@@ -27,9 +27,9 @@ const { title, description, url, duration, timestamp, tags } = Astro.props;
   <p class="">
     {description}
   </p>
-  <div class="flex flex-wrap gap-2">
+  <div class="flex flex-wrap gap-2 w-full">
     {tags?.map((tag: string) => (
-      <span class="-zag-text -zag-bg zag-transition px-2 py-1 text-sm font-semibold">
+      <span class="-zag-text -zag-bg zag-transition px-2 py-1 text-sm font-semibold rounded-md whitespace-nowrap overflow-hidden text-ellipsis max-w-[150px]" title={tag}>
         {tag}
       </span>
     ))}
diff --git a/src/components/ProjectSnippet.astro b/src/components/ProjectSnippet.astro
index 7c80103..7d3233c 100644
--- a/src/components/ProjectSnippet.astro
+++ b/src/components/ProjectSnippet.astro
@@ -38,10 +38,10 @@ const { title, description, url, githubUrl, liveUrl, tags } = Astro.props;
   <p class="zag-text zag-transition">
     {description}
   </p>
-  <div class="flex flex-row wrap gap-2">
+  <div class="flex flex-wrap gap-2 w-full">
     {
       tags.map((tag) => (
-        <span class="-zag-text -zag-bg zag-transition px-2 py-1 text-sm font-semibold">
+        <span class="-zag-text -zag-bg zag-transition px-2 py-1 text-sm font-semibold rounded-md whitespace-nowrap overflow-hidden text-ellipsis max-w-[150px]" title={tag}>
           {tag}
         </span>
       ))