From cfb66157333a6d349f8e5890592d45b4c821c995 Mon Sep 17 00:00:00 2001
From: Sandeep Dilip <34922961+sanman1k98@users.noreply.github.com>
Date: Thu, 14 Dec 2023 12:29:48 -0500
Subject: [PATCH] fix: remove additional whitespace generated

Links on the resume page had additional whitespace surrounding `<span>`
elements, making the underline on the anchor elements look weird.
Similar issue with the `<summary>` elements.

Since `@astrojs/compiler@2.3.1`, Astro preserves whitespace before
compacting; see withastro/compiler#893 for more details and links to
other issues.

To address this change without refactoring all the HTML onto a single
line to avoid creating whitespace-only text nodes inside an
inline-formatting context, set the display to `flex`. For information on
how whitespace is handled by HTML and CSS, see this article on MDN:
https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Whitespace
---
 src/pages/resume/_components/BaseEntry.astro    | 2 +-
 src/pages/resume/_components/Contact.astro      | 2 +-
 src/pages/resume/_components/SkillDetails.astro | 4 +---
 3 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/pages/resume/_components/BaseEntry.astro b/src/pages/resume/_components/BaseEntry.astro
index 811bf03..461ab7f 100644
--- a/src/pages/resume/_components/BaseEntry.astro
+++ b/src/pages/resume/_components/BaseEntry.astro
@@ -43,7 +43,7 @@ if (entry) {
       <h3 class="leading-snug font-600 text-slate-700 text-lg tracking-tight">
         {link ? (
           <a
-            class="group decoration-current decoration-1 link"
+            class="group flex max-w-fit decoration-current decoration-1 link"
             href={link}
             target="_blank"
           >
diff --git a/src/pages/resume/_components/Contact.astro b/src/pages/resume/_components/Contact.astro
index 65d9c42..298da25 100644
--- a/src/pages/resume/_components/Contact.astro
+++ b/src/pages/resume/_components/Contact.astro
@@ -39,7 +39,7 @@ const { class: className } = Astro.props;
       const { text, icon, ...attrs } = link;
       return (
         <li>
-          <a { ...attrs }>
+          <a class="flex justify-end content-center" { ...attrs }>
             <span class="hidden sm:inline">{text}</span>
             <Icon name={icon} label={text} class="print:hidden ml-1"/>
           </a>
diff --git a/src/pages/resume/_components/SkillDetails.astro b/src/pages/resume/_components/SkillDetails.astro
index fd1a554..2016899 100644
--- a/src/pages/resume/_components/SkillDetails.astro
+++ b/src/pages/resume/_components/SkillDetails.astro
@@ -31,8 +31,6 @@ const { Content } = await entry.render();
 </style>
 
 <details class:list={["", className]}>
-  <summary class="text-lg font-600 cursor-pointer">
-    {entry.data.category}
-  </summary>
+  <summary class="text-lg font-600 cursor-pointer">{entry.data.category}</summary>
   <Content />
 </details>