From fb6c044163f547a46756637b0a0e504bdda287b5 Mon Sep 17 00:00:00 2001
From: Respirayson <raysonyeap4c@gmail.com>
Date: Sat, 3 Aug 2024 00:06:01 +0800
Subject: [PATCH] Add bubble to timeline

---
 src/pages/elections/Timeline.tsx | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/pages/elections/Timeline.tsx b/src/pages/elections/Timeline.tsx
index ecb1a63..a139f13 100644
--- a/src/pages/elections/Timeline.tsx
+++ b/src/pages/elections/Timeline.tsx
@@ -31,20 +31,21 @@ function Timeline() {
           </div>
           <div className='relative col-span-12 px-4 space-y-6 sm:col-span-9'>
             <div
-              className='col-span-12 space-y-12 relative px-4 sm:col-span-8 sm:space-y-8 sm:before:absolute
-                sm:before:top-2 sm:before:bottom-0 sm:before:w-0.5 sm:before:-left-3 before:dark:bg-gray-300'
+              className='col-span-12 space-y-12 relative px-4 sm:col-span-8 sm:space-y-8 before:absolute
+                before:top-2 before:bottom-0 before:w-0.5 before:-left-3
+                before:dark:bg-gray-300 translate-x-[20px] sm:translate-x-0'
             >
               {TimelineEvents.map((event, index) => (
                 <div
                   key={index}
-                  className='flex flex-col sm:relative sm:before:absolute sm:before:top-2 sm:before:w-4
-                        sm:before:h-4 sm:before:rounded-full sm:before:left-[-35px]
-                        sm:before:z-[1] before:dark:bg-[#e58e26]'
+                  className='flex flex-col relative before:absolute before:top-2 before:w-4
+                        before:h-4 before:rounded-full before:left-[-35px]
+                        before:z-[1] before:dark:bg-[#e58e26]'
                 >
                   <h3 className='text-xl font-semibold tracking-wide'>
                     {event.title}
                   </h3>
-                  <time className='text-xs pt-2 tracking-wide uppercase dark:text-gray-600'>
+                  <time className='text-xs p-2 tracking-wide uppercase dark:text-gray-600'>
                     {event.date}
                   </time>
                   <p className='mt-3'>{event.description}</p>