From d161bdedffdbf1a1c2349a694b6165b9c74cacd8 Mon Sep 17 00:00:00 2001
From: Adam Plesnik <adam.plesnik@expersoft.com>
Date: Fri, 17 Jan 2025 11:43:06 +0100
Subject: [PATCH] Fix underline on mobile

---
 src/components/WorkPreviewTile.tsx | 6 +++---
 src/partials/Layout.tsx            | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/WorkPreviewTile.tsx b/src/components/WorkPreviewTile.tsx
index 0207c5f..9cbbf3e 100644
--- a/src/components/WorkPreviewTile.tsx
+++ b/src/components/WorkPreviewTile.tsx
@@ -21,9 +21,9 @@ const WorkPreviewTile = ({ title, className, link, src, titleRight }: WorkPrevie
         <Heading
           size={2}
           className={clsx(
-            'top-4 mt-4 flex items-baseline gap-2 sm:max-w-64 md:absolute md:max-w-72 lg:max-w-full',
-            'after:absolute after:bottom-1 after:left-0 after:h-[3px] after:w-full after:max-w-0 after:bg-black after:transition-[max-width] after:ease-out group-hover:after:max-w-full',
-            titleRight ? 'right-8' : 'left-8'
+            'relative mt-4 inline-flex items-baseline gap-2 sm:max-w-64 md:absolute md:top-4 md:max-w-72 lg:max-w-full',
+            'after:absolute after:bottom-1 after:left-0 after:h-[2px] after:w-full after:max-w-0 after:bg-black after:transition-[max-width] after:ease-out group-hover:after:max-w-full after:md:h-[3px]',
+            titleRight ? 'md:right-8' : 'md:left-8'
           )}
         >
           {title}
diff --git a/src/partials/Layout.tsx b/src/partials/Layout.tsx
index 4dbabf4..13af274 100644
--- a/src/partials/Layout.tsx
+++ b/src/partials/Layout.tsx
@@ -39,7 +39,7 @@ const Layout = ({ outlet }: { outlet?: ReactNode | null }) => {
             className={({ isActive }) =>
               clsx(
                 'relative cursor-pointer text-2xl font-medium sm:text-3xl',
-                'after:absolute after:bottom-1 after:left-0 after:h-[3px] after:w-full after:max-w-0 after:bg-black after:transition-[max-width] after:ease-in-out hover:after:max-w-full',
+                'after:absolute after:bottom-1 after:left-0 after:h-[2px] after:w-full after:max-w-0 after:bg-black after:transition-[max-width] after:ease-in-out hover:after:max-w-full after:sm:h-[3px]',
                 isActive && 'after:max-w-full'
               )
             }
@@ -51,7 +51,7 @@ const Layout = ({ outlet }: { outlet?: ReactNode | null }) => {
             className={({ isActive }) =>
               clsx(
                 'relative cursor-pointer text-2xl font-medium sm:text-3xl',
-                'after:absolute after:bottom-1 after:left-0 after:h-[3px] after:w-full after:max-w-0 after:bg-black after:transition-[max-width] after:ease-in-out hover:after:max-w-full',
+                'after:absolute after:bottom-1 after:left-0 after:h-[2px] after:w-full after:max-w-0 after:bg-black after:transition-[max-width] after:ease-in-out hover:after:max-w-full after:sm:h-[3px]',
                 isActive && 'after:max-w-full'
               )
             }