fix: end each related commit with its own dot

resources/js/components/related-commits.tsx

@@ -1,7 +1,6 @@
 import { CommitCard } from '@/components/commit-card';
 import { GraphCanvas } from '@/components/graph-canvas';
 import { useRelatedCommits } from '@/hooks/use-related-commits';
-import { laneOf } from '@/lib/utils';
 import type { Commit } from '@/types';
 
 export function RelatedCommits({ commitId }: { commitId: string }) {
@@ -25,25 +24,15 @@ export function RelatedCommits({ commitId }: { commitId: string }) {
 }
 
 /**
- * The related commits chain one after the other in a canvas of their own, below the thread's, and end on a dot below
- * the last one, as a feed does.
+ * The related commits relate to the commit shown, not to each other, so each one ends on a dot of its own in a canvas
+ * below the thread's, as a feed does.
  */
 export function RelatedCommitList({ commits }: { commits: Commit[] }) {
     return (
         <GraphCanvas>
-            {commits.map((commit, index) => {
-                const previous = commits[index - 1];
-
-                return (
-                    <CommitCard
-                        key={commit.id}
-                        commit={commit}
-                        previousLane={previous && laneOf(previous)}
-                        graphAfter={previous?.id}
-                        endsWithDot={index === commits.length - 1}
-                    />
-                );
-            })}
+            {commits.map((commit) => (
+                <CommitCard key={commit.id} commit={commit} endsWithDot />
+            ))}
         </GraphCanvas>
     );
 }

tests/Unit/StandaloneCommitGraphs.test.tsx

@@ -181,7 +181,7 @@ test('ends the chain of search results on a dot below the last one', async () =>
     );
 });
 
-test('draws related commits in a canvas of their own, chained one after the other and ending on a dot below the last one', async () => {
+test('draws related commits in a canvas of their own, each commit ending on its dot as in a feed', async () => {
     const html = await render(() => (
         <RelatedCommitList
             commits={[commit('one', 1), commit('two', 2), commit('three', 3)]}
@@ -190,10 +190,5 @@ test('draws related commits in a canvas of their own, chained one after the othe
 
     assert.equal(html.match(/data-test="graph-canvas"/g)?.length, 1);
     assert.equal(railPiecesLeftShowing(html), 0);
-    assert.equal(html.match(/data-test="rail-end-dot"/g)?.length, 1);
-    // In the last card: past everything the second one shows.
-    assert.ok(
-        html.indexOf('data-test="rail-end-dot"') >
-            html.lastIndexOf('Commit two'),
-    );
+    assert.equal(html.match(/data-test="rail-end-dot"/g)?.length, 3);
 });