From 09b838819ba8c85168b702d5de36e0d2037dee09 Mon Sep 17 00:00:00 2001
From: Justin Deal <justindeal@protonmail.com>
Date: Sat, 3 May 2025 02:30:33 -0700
Subject: [PATCH] fix tag alignment

---
 src/components/ArticleSnippet.astro | 4 ++--
 src/components/ProjectSnippet.astro | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

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>
       ))