Improve borders on track-stops

Author: aryanpingle

src/components/tracks/OverviewTimeline.js

@@ -80,7 +80,7 @@ const ChapterSection = memo(
     return (
       <ul className={css.chapterList}>
         {chapter.title && (
-          <li>
+          <li className={css.chapterListItem}>
             <button
               className={cn(
                 css.chapterTitle,
@@ -112,7 +112,7 @@ const ChapterSection = memo(
                 return (
                   <li
                     key={`${video.slug}-${partIndex}`}
-                    className={cn(css.videoItem, {
+                    className={cn(css.videoItem, css.chapterListItem, {
                       [css.seen]: hasSeenPart,
                       [css.last]: isLastVideo && partIndex === currentPartIndex
                     })}>
@@ -127,7 +127,7 @@ const ChapterSection = memo(
             ) : (
               <li
                 key={video.slug}
-                className={cn(css.videoItem, {
+                className={cn(css.videoItem, css.chapterListItem, {
                   [css.seen]: hasSeenVideo,
                   [css.last]: isLastVideo
                 })}>

src/components/tracks/OverviewTimeline.module.css

@@ -36,6 +36,13 @@
   padding: 0;
 }
 
+.chapterListItem {
+  /*
+  CSS 'border' interferes with the track stop lines, so we use a box shadow that matches 'border-red-light'.
+  */
+  box-shadow: 0 -1px 0 rgba(255, 0, 0, 0.1);
+}
+
 .chapterTitle {
   position: relative;
   height: var(--baseline);