fix timeline overlap

rushilvishwakarma · Oct 2, 2024 · 6a9a92d · 6a9a92d
1 parent 2d10002
commit 6a9a92d
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 16 deletions.
diff --git a/app/details/page.tsx b/app/details/page.tsx
@@ -81,7 +81,7 @@ const Page: NextPage = () => {
           </CardContent>
         </Card>
       </div>
-      <div className="md:flex md:space-x-4 mx-auto px-6 md:px-8 lg:px-10 md:space-y-0">
+      <div className="text-left md:flex md:space-x-1 mx-auto px-6 md:px-8 lg:px-10 md:space-y-0">
         <Card className="flex-1">
         <CardHeader>
             <CardDescription>FAQ</CardDescription>
@@ -139,9 +139,10 @@ const TimelineDemo = (): JSX.Element => {
       title: "Day 1",
       date: "5-10-2024",
       content: (
-        <ul className="list-none text-neutral-800 dark:text-neutral-200 text-xs md:text-sm font-normal mb-8 space-y-4">
+        <ul className="list-none leading-loose text-neutral-800 dark:text-neutral-200 text-xs md:text-sm font-normal mb-8 space-y-4">
+
           <li>
-            <Badge className="mr-2">9:30 AM</Badge>
+          <Badge className="mr-2">9:30 AM</Badge>
             Introduction to GitHub
           </li>
           <li>
@@ -171,21 +172,25 @@ const TimelineDemo = (): JSX.Element => {
       title: "Day 2",
       date: "6-10-2024",
       content: (
-        <ul className="list-none text-neutral-800 dark:text-neutral-200 text-xs md:text-sm font-normal mb-8 space-y-4">
+        <ul className="leading-loose list-none text-neutral-800 dark:text-neutral-200 text-xs md:text-sm font-normal mb-8 space-y-4">
+
           <li>
-            <Badge className="mr-2">9:30 AM</Badge>
+          <Badge className="mr-2">9:30 AM</Badge>
             Start of day 2 contribution
           </li>
+
           <li>
-            <Badge className="mr-2">12:30 PM</Badge>
+          <Badge className="mr-2">12:30 PM</Badge>
             Lunch Break
           </li>
+
           <li>
-            <Badge className="mr-2">1:30 PM</Badge>
+          <Badge className="mr-2">1:30 PM</Badge>
             Final round for open source contribution
           </li>
+
           <li>
-            <Badge className="mr-2">5:00 PM</Badge>
+          <Badge className="mr-2">5:00 PM</Badge>
             Result Declaration and Prize Distribution
           </li>
         </ul>

diff --git a/components/ui/timeline.tsx b/components/ui/timeline.tsx
@@ -42,20 +42,20 @@ export const Timeline = ({ data }: { data: TimelineEntry[] }) => {
               <div className="h-10 absolute left-3 md:left-3 w-10 rounded-full bg-transparent flex items-center justify-center">
                 <div className="h-4 w-4 rounded-full bg-neutral-200 dark:bg-neutral-700 border-neutral-300 dark:border-neutral-700 p-2" />
               </div>
-              <h3 className="md:block text-xl md:pl-20 md:text-5xl font-bold text-neutral-500 dark:text-neutral-500 flex items-center">
-                {item.title}
-                <Badge variant="secondary" className="ml-2"> {/* Badge for date */}
-                  {item.date}
-                </Badge>
-              </h3>
+              <h3 className="hidden md:block text-xl md:pl-20 md:text-5xl font-bold gap-2 px-3">
+  {item.title}
+</h3>
+<Badge variant="secondary" className="hidden md:block"> {/* Badge for date */}{item.date}                </Badge>
             </div>
 
             <div className="relative pl-20 pr-4 md:pl-4 w-full">
-              <h3 className="md:hidden text-2xl mb-4 text-left font-bold text-neutral-500 dark:text-neutral-500 flex items-center">
+              <h3 className="inline-flex md:hidden text-2xl mb-4 text-left font-bold text-neutral-500 dark:text-neutral-500 items-center">
                 {item.title}
-                <Badge variant="secondary" className="ml-2"> {/* Badge for date */}
+                <div className="pl-3">
+                <Badge variant="secondary" className=""> {/* Badge for date */}
                   {item.date}
                 </Badge>
+                </div>
               </h3>
               {item.content}
             </div>