fix(timeline): add spaces between stages

Author: chiptus

src/components/schedule/ArtistScheduleBlock.tsx

@@ -11,40 +11,40 @@ interface ArtistScheduleBlockProps {
   compact?: boolean;
 }
 
-export const ArtistScheduleBlock = ({
+export function ArtistScheduleBlock({
   artist,
   userVote,
   onVote,
   compact = false,
-}: ArtistScheduleBlockProps) => {
-  const getVoteCount = (voteType: number) => {
+}: ArtistScheduleBlockProps) {
+  function getVoteCount(voteType: number) {
     return (artist.votes || []).filter((vote) => vote.vote_type === voteType)
       .length;
-  };
+  }
 
-  const handleVote = (voteType: number) => {
+  function handleVote(voteType: number) {
     if (onVote) {
       onVote(artist.id, voteType);
     }
-  };
+  }
 
   return (
     <Card className="bg-white/10 backdrop-blur-md border-purple-400/30 hover:border-purple-400/50 transition-colors">
       <CardContent className={compact ? "p-3" : "p-4"}>
         <div className="mb-2">
           <Link
             to={`/artist/${artist.id}`}
-            className="text-white font-semibold hover:text-purple-300 transition-colors block"
+            className="text-white font-semibold hover:text-purple-300 transition-colors block text-sm"
           >
             {artist.name}
           </Link>
 
           {/* Show artists in this set */}
-          {artist.artists && artist.artists.length > 0 && (
+          {/* {artist.artists && artist.artists.length > 0 && (
             <div className="text-purple-300 text-sm mt-1">
               {artist.artists.map((a) => a.name).join(", ")}
             </div>
-          )}
+          )} */}
         </div>
 
         <div className="space-y-1 text-sm text-purple-200">
@@ -111,4 +111,4 @@ export const ArtistScheduleBlock = ({
       </CardContent>
     </Card>
   );
-};
+}

src/components/schedule/StageLabels.tsx

@@ -4,9 +4,9 @@ interface StageLabelsProps {
 
 export function StageLabels({ stages }: StageLabelsProps) {
   return (
-    <div className="absolute left-4 top-16 z-20 space-y-6">
+    <div className="absolute left-4 top-16 z-20 space-y-20">
       {stages.map((stage) => (
-        <div key={stage.name} className="h-20 flex items-center justify-end">
+        <div key={stage.name} className="h-20 flex items-center">
           <div className="text-sm font-medium text-white bg-gradient-to-r from-purple-600 to-blue-600 px-2 py-1 rounded">
             {stage.name}
           </div>

src/components/schedule/TimelineContainer.tsx

@@ -20,7 +20,6 @@ export function TimelineContainer({
     <div
       ref={scrollContainerRef}
       className="overflow-x-auto overflow-y-hidden pb-20"
-      style={{ paddingLeft: "144px" }}
     >
       {/* Time Scale */}
       <TimeScale
@@ -30,7 +29,7 @@ export function TimelineContainer({
       />
 
       {/* Stage Rows */}
-      <div className="space-y-6">
+      <div className="space-y-20 mt-28">
         {timelineData.stages.map((stage) => (
           <StageRow
             key={stage.name}