Fix underline on mobile

adamplesnik · Jan 17, 2025 · d161bde · d161bde
1 parent cf926fa
commit d161bde
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 5 deletions.
diff --git 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
@@ -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'
               )
             }