Make project page responsive

src/components/Projects/StatusStepper/ProjectStepper.tsx

@@ -82,9 +82,9 @@ export function ProjectStepper(props: ProjectStepperProps) {
     <div
       ref={stickyElRef}
       className={cn(
-        'sticky top-0 my-5 overflow-hidden rounded-lg border bg-white transition-all',
+        'relative sm:sticky top-0 my-5 -mx-4 sm:mx-0 overflow-hidden rounded-none border-x-0 sm:border-x sm:rounded-lg border bg-white transition-all',
         {
-          '-mx-5 rounded-none border-x-0 border-t-0 bg-gray-50': isSticky,
+          'sm:-mx-5 sm:rounded-none sm:border-x-0 sm:border-t-0 sm:bg-gray-50': isSticky,
         },
       )}
     >
@@ -183,7 +183,7 @@ export function ProjectStepper(props: ProjectStepperProps) {
         )}
       </div>
 
-      <div className="flex min-h-[60px] items-center justify-between gap-3 px-4">
+      <div className="flex flex-col sm:flex-row min-h-[60px] items-start sm:items-center justify-between gap-2 sm:gap-3 px-4 py-4 sm:py-0">
         <StepperAction
           isActive={activeStep === 0}
           isCompleted={activeStep > 0}

src/components/Projects/StatusStepper/StepperStepSeparator.tsx

@@ -9,7 +9,7 @@ export function StepperStepSeparator(props: StepperStepSeparatorProps) {
 
   return (
     <hr
-      className={cn('flex-grow border border-gray-300', {
+      className={cn('flex-grow hidden sm:flex border border-gray-300', {
         'border-green-500': isActive,
       })}
     />

src/hooks/use-sticky-stuck.tsx

@@ -1,4 +1,5 @@
 import { type RefObject, useEffect, useState } from 'react';
+import { isMobileScreen } from '../lib/is-mobile.ts';
 
 // Checks if the sticky element is stuck or not
 export function useStickyStuck<T extends HTMLElement>(
@@ -8,6 +9,10 @@ export function useStickyStuck<T extends HTMLElement>(
   const [isSticky, setIsSticky] = useState(false);
 
   useEffect(() => {
+    if (isMobileScreen()) {
+      return;
+    }
+
     const handleScroll = () => {
       if (ref.current) {
         setIsSticky(ref.current.getBoundingClientRect().top <= offset);

src/lib/is-mobile.ts

@@ -25,3 +25,9 @@ export function isIOS(): boolean {
 export function isMobile(): boolean {
   return isAndroid() || isIOS();
 }
+
+export function isMobileScreen(): boolean {
+  return (
+    typeof window !== 'undefined' && (window.innerWidth < 640 || isMobile())
+  );
+}

src/pages/projects/[projectId]/index.astro

@@ -49,9 +49,9 @@ const githubUrl = `https://github.com/kamranahmedse/developer-roadmap/tree/maste
     <div class='container'>
       <ProjectTabs projectId={projectId} activeTab='details' />
 
-      <div class='mb-4 rounded-lg border bg-gradient-to-b from-gray-100 to-white to-10% p-5'>
+      <div class='mb-4 rounded-lg border bg-gradient-to-b from-gray-100 to-white to-10% py-2 p-4 sm:p-5'>
         <div class='relative'>
-          <div class='mb-4 flex items-center justify-between'>
+          <div class='mb-4 hidden sm:flex items-center justify-between'>
             <div class='flex flex-row flex-wrap gap-1.5'>
               {
                 projectData.skills.map((skill) => (
@@ -61,9 +61,9 @@ const githubUrl = `https://github.com/kamranahmedse/developer-roadmap/tree/maste
             </div>
             <Badge variant='yellow' text={projectData.difficulty} />
           </div>
-          <div class="my-7">
+          <div class="my-2 sm:my-7">
-            <h1 class='mb-2 text-3xl font-semibold'>{projectData.title}</h1>
+            <h1 class='mb-1 sm:mb-2 text-xl sm:text-3xl font-semibold'>{projectData.title}</h1>
-            <p class='text-sm text-gray-500'>{projectData.description}</p>
+            <p class='text-balance text-sm text-gray-500'>{projectData.description}</p>
           </div>
         </div>