Merge pull request #10 from jasonMPM/tailwind-fix

Add files via upload

frontend/src/components/FocusView/FocusTimeline.jsx

@@ -7,6 +7,7 @@ export default function FocusTimeline({ project, activeDeliverableId, onEditDeli
 
   return (
     <div className="px-6 pb-6 pt-4">
+      {/* Project header */}
       <div className="flex items-center gap-2 mb-2">
         <div className="w-3 h-3 rounded-full flex-shrink-0" style={{ backgroundColor: project.color }} />
         <h3 className="text-gold font-bold text-base tracking-wide">{project.name}</h3>
@@ -18,8 +19,24 @@ export default function FocusTimeline({ project, activeDeliverableId, onEditDeli
         </span>
       </div>
 
-      {/* pt-6 gives the "SELECTED" badge room above the card without clipping */}
-      <div className="flex items-center overflow-x-auto pb-3 pt-6 gap-0 min-h-0">
+      {/*
+        px-4 gives the scale-105 active card breathing room on both sides
+        so it never clips against the scroll container edge.
+        pt-8 gives the absolute "SELECTED" badge (-top-5) full clearance.
+        pb-2 prevents the bottom ring shadow from clipping.
+        overflow-x-auto + overflow-y-visible lets the badge float above.
+      */}
+      <div
+        className="flex items-center gap-0 min-h-0"
+        style={{
+          overflowX: 'auto',
+          overflowY: 'visible',
+          paddingTop: '2rem',
+          paddingBottom: '0.5rem',
+          paddingLeft: '1rem',
+          paddingRight: '1rem',
+        }}
+      >
         {sorted.map((d, i) => (
           <div key={d.id} className="flex items-center flex-shrink-0">
             <DeliverableCard
@@ -39,7 +56,7 @@ export default function FocusTimeline({ project, activeDeliverableId, onEditDeli
           </div>
         ))}
         {sorted.length === 0 && (
-          <p className="text-text-muted text-sm italic mt-0">No deliverables yet.</p>
+          <p className="text-text-muted text-sm italic">No deliverables yet.</p>
         )}
       </div>
     </div>