fix: Overflow issue with the GitHub icon

Author: arceprogramando

src/components/cards/project_card.rs

@@ -21,7 +21,7 @@ pub fn ProjectCard(
     let current_color = (*colors.get(&button_bg_color).unwrap()).to_string();
 
     view! {
-        <div class="group flex flex-col gap-y-6 border border-black p-2 sm:p-6 hover:bg-orange-500 dark:hover:bg-zinc-900/40 bg-orange-100 dark:bg-black/40 drop-shadow-[0_0_0_rgba(0,0,0)] hover:drop-shadow-[-4px_-4px_0_rgba(0,0,0)] transition justify-between">
+        <div class="group flex flex-col items-center sm:items-stretch  gap-y-6 border border-black p-4  sm:p-6 hover:bg-orange-500 dark:hover:bg-zinc-900/40 bg-orange-100 dark:bg-black/40 drop-shadow-[0_0_0_rgba(0,0,0)] hover:drop-shadow-[-4px_-4px_0_rgba(0,0,0)] transition justify-between">
             <a href=link target="_blank">
                 <div class="flex flex-col justify-between gap-y-2">
                     {if brand_as_letter {
@@ -47,18 +47,18 @@ pub fn ProjectCard(
                     <CardTitle texts=name/>
                     <p class="mt-2 font-work-sans text-black dark:text-white">{description}</p>
                 </div>
-                <div class="flex gap-2 items-center mt-4">
+                <div class="flex gap-4 sm:gap-0 justify-around items-center mt-4">
                     <ButtonLink href=button_link size="tiny">
                         {if button_text.is_empty() {
                             name.join("")
                         } else {
                             button_text.to_string()
                         }}
 
-                    </ButtonLink>
-                    <span class="ml-auto">
+                        </ButtonLink>
+                        <span class="px-1">
                         <GithubIcon size=30/>
-                    </span>
+                        </span>
                 </div>
             </a>
         </div>