fix: better align the SlotProgressTimeline component (#286)

Author: skylenet

src/components/Ethereum/SlotProgressTimeline/SlotProgressTimeline.tsx

@@ -155,8 +155,8 @@ export function SlotProgressTimeline({
   return (
     <div className={clsx('w-full', className)}>
       {/* Desktop: Horizontal layout */}
-      <div className="hidden h-32 md:block">
-        <div className="flex h-full w-full items-center px-4">
+      <div className="hidden md:block">
+        <div className="flex w-full items-center px-4 py-2">
           {enrichedPhases.map((phase, index) => {
             const status = phase.isActive ? 'active' : phase.isCompleted ? 'completed' : 'pending';
             const hasConnection = index < enrichedPhases.length - 1;

src/components/Ethereum/SlotProgressTimeline/components/PhaseNode/PhaseNode.tsx

@@ -47,7 +47,7 @@ export function PhaseNode({ phase, status, showStats = true, onClick, className
   const phaseColor = getCSSVar(phase.color);
 
   return (
-    <div className={clsx('flex h-32 w-20 flex-col items-center gap-2', className)}>
+    <div className={clsx('flex w-20 flex-col items-center justify-center gap-2', className)}>
       {/* Circular icon container */}
       <button
         type="button"
@@ -96,7 +96,7 @@ export function PhaseNode({ phase, status, showStats = true, onClick, className
       </button>
 
       {/* Phase label, time, and stats */}
-      <div className="flex min-h-16 flex-col items-center justify-start gap-0.5">
+      <div className="flex flex-col items-center justify-start gap-0.5">
         <span
           className={clsx(
             'text-center font-medium transition-colors duration-300',

src/pages/ethereum/live/components/SlotViewLayout/SlotViewLayout.tsx

@@ -411,7 +411,7 @@ export function SlotViewLayout({ mode }: SlotViewLayoutProps): JSX.Element {
     >
       <>
         <div className="hidden h-screen flex-col overflow-hidden bg-background lg:flex">
-          <div className="shrink-0 border-b border-border bg-surface px-6 py-4">
+          <div className="shrink-0 border-b border-border bg-surface px-6 py-2">
             <LiveBlockDetailsCard data={slotData.blockDetails} slotProgressPhases={slotProgressPhases} />
           </div>