From fb2bf9bd43300ca7336146f44f8c9bf005c284bd Mon Sep 17 00:00:00 2001
From: Thomas Plumpton <Thomas.Plumpton@hotmail.co.uk>
Date: Sat, 7 Feb 2026 16:10:15 +0000
Subject: [PATCH 1/5] fix(graph): fixed canvas 2d graph alignment when
 showHeaders is false (#117)

---
 README.md                                                  | 3 +++
 package-lock.json                                          | 2 +-
 packages/library/README.md                                 | 4 ++++
 packages/library/package.json                              | 2 +-
 .../library/src/__snapshots__/GitLogPaged.spec.tsx.snap    | 6 +++---
 packages/library/src/modules/Graph/constants.ts            | 7 +++++++
 .../library/src/modules/Graph/core/GraphCore.module.scss   | 1 -
 .../src/modules/Graph/strategies/Canvas/Canvas2DGraph.tsx  | 6 +++++-
 .../src/modules/Graph/strategies/Grid/HTMLGridGraph.tsx    | 4 +++-
 .../Grid/__snapshots__/HTMLGridGraph.spec.tsx.snap         | 2 +-
 10 files changed, 28 insertions(+), 9 deletions(-)
 create mode 100644 packages/library/src/modules/Graph/constants.ts

diff --git a/README.md b/README.md
index 074b1825..4803e65a 100644
--- a/README.md
+++ b/README.md
@@ -117,6 +117,9 @@ This strategy can be used by rendering the `<GitLog.GraphHTMLGrid />` subcompone
 
 ### Canvas 2D
 
+> [!WARNING]
+> This Canvas2D variant of the graph is in-complete and may have rendering bugs. It's also not as feature-rich as the HTML variant due to canvas API limitations and unfinished work.
+
 This implementation uses a standard HTML `canvas` element with a `2d` rendering context.
 
 This strategy can be used by rendering the `<GitLog.GraphCanvas2D />` subcomponent under the `<GitLog />`.
diff --git a/package-lock.json b/package-lock.json
index 44c131d5..4b7cd0f1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11766,7 +11766,7 @@
     },
     "packages/library": {
       "name": "@tomplum/react-git-log",
-      "version": "3.5.0",
+      "version": "3.5.1",
       "license": "Apache-2.0",
       "dependencies": {
         "@uidotdev/usehooks": "^2.4.1",
diff --git a/packages/library/README.md b/packages/library/README.md
index e095b1c3..af95ad4a 100644
--- a/packages/library/README.md
+++ b/packages/library/README.md
@@ -337,6 +337,10 @@ The following properties are injected into the functions `props` argument:
 
 ### GraphCanvas2D
 
+> [!WARNING]
+> This Canvas2D variant of the graph is in-complete and may have rendering bugs. It's also not as feature-rich as the HTML variant due to canvas API limitations and unfinished work.
+
+
 | Property          | Type                                  | Description                                                                                                    |
 |-------------------|---------------------------------------|----------------------------------------------------------------------------------------------------------------|
 | `nodeTheme`       | [`NodeTheme`](#nodetheme)             | Theme applied to commit node elements in the graph.                                                            |
diff --git a/packages/library/package.json b/packages/library/package.json
index d6b65ef2..93bbe5a5 100644
--- a/packages/library/package.json
+++ b/packages/library/package.json
@@ -3,7 +3,7 @@
   "author": "Thomas Plumpton",
   "repository": "https://github.com/TomPlum/react-git-log",
   "description": "A flexible, themable, React component for visualising Git commit history, branch and tag metadata.",
-  "version": "3.5.0",
+  "version": "3.5.1",
   "license": "Apache-2.0",
   "type": "module",
   "main": "dist/react-git-log.js",
diff --git a/packages/library/src/__snapshots__/GitLogPaged.spec.tsx.snap b/packages/library/src/__snapshots__/GitLogPaged.spec.tsx.snap
index dda1710b..600267b5 100644
--- a/packages/library/src/__snapshots__/GitLogPaged.spec.tsx.snap
+++ b/packages/library/src/__snapshots__/GitLogPaged.spec.tsx.snap
@@ -1763,7 +1763,7 @@ exports[`GitLogPaged > should render correctly and match the snapshot the pagina
       >
         <div
           class="graph"
-          style="grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(20, 40px);"
+          style="grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(20, 40px); margin-top: 12px;"
         >
           <button
             class="column"
@@ -3912,7 +3912,7 @@ exports[`GitLogPaged > should render correctly and match the snapshot the pagina
       >
         <div
           class="graph"
-          style="grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(20, 40px);"
+          style="grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(20, 40px); margin-top: 12px;"
         >
           <button
             class="column"
@@ -6854,7 +6854,7 @@ exports[`GitLogPaged > should render correctly and match the snapshot the pagina
       >
         <div
           class="graph"
-          style="grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(40, 40px);"
+          style="grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(40, 40px); margin-top: 12px;"
         >
           <button
             class="column"
diff --git a/packages/library/src/modules/Graph/constants.ts b/packages/library/src/modules/Graph/constants.ts
new file mode 100644
index 00000000..ca04d3ae
--- /dev/null
+++ b/packages/library/src/modules/Graph/constants.ts
@@ -0,0 +1,7 @@
+/**
+ * The number of pixels of margin at the
+ * top of the graph element that offsets
+ * it enough to line-up correctly with
+ * adjacent elements (such as tags or a table).
+ */
+export const GRAPH_MARGIN_TOP = 12
\ No newline at end of file
diff --git a/packages/library/src/modules/Graph/core/GraphCore.module.scss b/packages/library/src/modules/Graph/core/GraphCore.module.scss
index c4cf64e4..d4a5fb0b 100644
--- a/packages/library/src/modules/Graph/core/GraphCore.module.scss
+++ b/packages/library/src/modules/Graph/core/GraphCore.module.scss
@@ -3,7 +3,6 @@
 }
 
 .graph {
-  margin-top: 12px;
   height: 100%;
   display: grid;
   gap: 0;
diff --git a/packages/library/src/modules/Graph/strategies/Canvas/Canvas2DGraph.tsx b/packages/library/src/modules/Graph/strategies/Canvas/Canvas2DGraph.tsx
index c0e8468c..ba1b4357 100644
--- a/packages/library/src/modules/Graph/strategies/Canvas/Canvas2DGraph.tsx
+++ b/packages/library/src/modules/Graph/strategies/Canvas/Canvas2DGraph.tsx
@@ -9,10 +9,11 @@ import {
 } from 'modules/Graph/strategies/Canvas'
 import { useSelectCommit } from 'hooks/useSelectCommit'
 import styles from './Canvas2DGraph.module.scss'
+import { GRAPH_MARGIN_TOP } from 'modules/Graph/constants'
 
 export const Canvas2DGraph = () => {
   const { selectCommitHandler } = useSelectCommit()
-  const { isServerSidePaginated } = useGitContext()
+  const { isServerSidePaginated, showHeaders } = useGitContext()
   const { graphWidth, visibleCommits, nodeSize, nodeTheme, orientation } = useGraphContext()
 
   const {
@@ -168,6 +169,9 @@ export const Canvas2DGraph = () => {
       width={canvasWidth}
       height={canvasHeight}
       className={styles.canvas}
+      style={{
+        marginTop: !showHeaders ? GRAPH_MARGIN_TOP : undefined
+      }}
     />
   )
 }
\ No newline at end of file
diff --git a/packages/library/src/modules/Graph/strategies/Grid/HTMLGridGraph.tsx b/packages/library/src/modules/Graph/strategies/Grid/HTMLGridGraph.tsx
index 9583bd2b..cc1cc6cc 100644
--- a/packages/library/src/modules/Graph/strategies/Grid/HTMLGridGraph.tsx
+++ b/packages/library/src/modules/Graph/strategies/Grid/HTMLGridGraph.tsx
@@ -8,6 +8,7 @@ import { useGitContext } from 'context/GitContext'
 import { getEmptyColumnState } from 'modules/Graph/strategies/Grid/utility/getEmptyColumnState'
 import { CSSProperties, useMemo } from 'react'
 import { placeholderCommits } from 'modules/Graph/strategies/Grid/hooks/usePlaceholderData/data'
+import { GRAPH_MARGIN_TOP } from 'modules/Graph/constants'
 
 export const HTMLGridGraph = () => {
   const { graphWidth, visibleCommits, columnData } = useGraphContext()
@@ -34,7 +35,8 @@ export const HTMLGridGraph = () => {
 
   const wrapperStyles: CSSProperties = {
     gridTemplateColumns: `repeat(${graphWidth}, 1fr)`,
-    gridTemplateRows: `repeat(${commitQuantity}, ${ROW_HEIGHT + rowSpacing}px)`
+    gridTemplateRows: `repeat(${commitQuantity}, ${ROW_HEIGHT + rowSpacing}px)`,
+    marginTop: GRAPH_MARGIN_TOP
   }
 
   return (
diff --git a/packages/library/src/modules/Graph/strategies/Grid/__snapshots__/HTMLGridGraph.spec.tsx.snap b/packages/library/src/modules/Graph/strategies/Grid/__snapshots__/HTMLGridGraph.spec.tsx.snap
index 39e59202..c74f7daf 100644
--- a/packages/library/src/modules/Graph/strategies/Grid/__snapshots__/HTMLGridGraph.spec.tsx.snap
+++ b/packages/library/src/modules/Graph/strategies/Grid/__snapshots__/HTMLGridGraph.spec.tsx.snap
@@ -4,7 +4,7 @@ exports[`HTML Grid Graph > should render the graph with the custom commit node i
 <DocumentFragment>
   <div
     class="graph"
-    style="grid-template-columns: repeat(200, 1fr); grid-template-rows: repeat(10, 40px);"
+    style="grid-template-columns: repeat(200, 1fr); grid-template-rows: repeat(10, 40px); margin-top: 12px;"
   >
     <button
       class="column"

From 34e703c2180f468271306925f4cadd5ba4c2bfbf Mon Sep 17 00:00:00 2001
From: Thomas Plumpton <Thomas.Plumpton@hotmail.co.uk>
Date: Sat, 7 Feb 2026 16:13:34 +0000
Subject: [PATCH 2/5] test(graph): added missing snapshot update

---
 .../library/src/__snapshots__/GitLog.spec.tsx.snap   | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/library/src/__snapshots__/GitLog.spec.tsx.snap b/packages/library/src/__snapshots__/GitLog.spec.tsx.snap
index d49aeb9c..0ec30c18 100644
--- a/packages/library/src/__snapshots__/GitLog.spec.tsx.snap
+++ b/packages/library/src/__snapshots__/GitLog.spec.tsx.snap
@@ -22732,7 +22732,7 @@ exports[`GitLog > HTML Grid Graph > should render correctly and match the snapsh
       >
         <div
           class="graph"
-          style="grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(474, 40px);"
+          style="grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(474, 40px); margin-top: 12px;"
         >
           <button
             class="column"
@@ -85368,7 +85368,7 @@ exports[`GitLog > HTML Grid Graph > should render correctly and match the snapsh
       >
         <div
           class="graph"
-          style="grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(474, 40px);"
+          style="grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(474, 40px); margin-top: 12px;"
         >
           <button
             class="column"
@@ -144982,7 +144982,7 @@ exports[`GitLog > HTML Grid Graph > should render correctly and match the snapsh
       >
         <div
           class="graph"
-          style="grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(30, 40px);"
+          style="grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(30, 40px); margin-top: 12px;"
         >
           <button
             class="column"
@@ -152750,7 +152750,7 @@ exports[`GitLog > HTML Grid Graph > should render correctly and match the snapsh
       >
         <div
           class="graph"
-          style="grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(473, 40px);"
+          style="grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(473, 40px); margin-top: 12px;"
         >
           <button
             class="column"
@@ -211463,7 +211463,7 @@ exports[`GitLog > HTML Grid Graph > should render correctly and match the snapsh
       >
         <div
           class="graph"
-          style="grid-template-columns: repeat(1, 1fr); grid-template-rows: repeat(10, 40px);"
+          style="grid-template-columns: repeat(1, 1fr); grid-template-rows: repeat(10, 40px); margin-top: 12px;"
         >
           <button
             class="column"
@@ -215695,7 +215695,7 @@ exports[`GitLog > HTML Grid Graph > should render correctly and match the snapsh
       >
         <div
           class="graph"
-          style="grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(474, 40px);"
+          style="grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(474, 40px); margin-top: 12px;"
         >
           <button
             class="column"

From 723c5274139fbbadd4ccf2bf1d58073db1534d43 Mon Sep 17 00:00:00 2001
From: Thomas Plumpton <Thomas.Plumpton@hotmail.co.uk>
Date: Sat, 7 Feb 2026 16:29:27 +0000
Subject: [PATCH 3/5] test(graph): canvas 2d graph coverage + sonar smell

---
 .../Graph/strategies/Canvas/Canvas2DGraph.tsx |  8 +--
 .../strategies/Canvas/CanvasGraph2D.spec.tsx  | 50 +++++++++++++++++++
 2 files changed, 55 insertions(+), 3 deletions(-)
 create mode 100644 packages/library/src/modules/Graph/strategies/Canvas/CanvasGraph2D.spec.tsx

diff --git a/packages/library/src/modules/Graph/strategies/Canvas/Canvas2DGraph.tsx b/packages/library/src/modules/Graph/strategies/Canvas/Canvas2DGraph.tsx
index ba1b4357..9e3ad030 100644
--- a/packages/library/src/modules/Graph/strategies/Canvas/Canvas2DGraph.tsx
+++ b/packages/library/src/modules/Graph/strategies/Canvas/Canvas2DGraph.tsx
@@ -13,7 +13,6 @@ import { GRAPH_MARGIN_TOP } from 'modules/Graph/constants'
 
 export const Canvas2DGraph = () => {
   const { selectCommitHandler } = useSelectCommit()
-  const { isServerSidePaginated, showHeaders } = useGitContext()
   const { graphWidth, visibleCommits, nodeSize, nodeTheme, orientation } = useGraphContext()
 
   const {
@@ -32,7 +31,9 @@ export const Canvas2DGraph = () => {
     indexCommit,
     isIndexVisible,
     selectedCommit,
-    previewedCommit
+    previewedCommit,
+    isServerSidePaginated,
+    showHeaders
   } = useGitContext()
 
   const getNodeColours = useCallback<GetCanvasRendererColoursFunction>((columnIndex: number) => {
@@ -169,8 +170,9 @@ export const Canvas2DGraph = () => {
       width={canvasWidth}
       height={canvasHeight}
       className={styles.canvas}
+      data-testid='graph-2d-canvas'
       style={{
-        marginTop: !showHeaders ? GRAPH_MARGIN_TOP : undefined
+        marginTop: showHeaders ? undefined : GRAPH_MARGIN_TOP
       }}
     />
   )
diff --git a/packages/library/src/modules/Graph/strategies/Canvas/CanvasGraph2D.spec.tsx b/packages/library/src/modules/Graph/strategies/Canvas/CanvasGraph2D.spec.tsx
new file mode 100644
index 00000000..4db31730
--- /dev/null
+++ b/packages/library/src/modules/Graph/strategies/Canvas/CanvasGraph2D.spec.tsx
@@ -0,0 +1,50 @@
+import { render, screen } from '@testing-library/react'
+import { Canvas2DGraph } from 'modules/Graph/strategies/Canvas/Canvas2DGraph'
+import * as gitContext from 'context/GitContext/useGitContext'
+import { commit, gitContextBag, graphContextBag, graphData } from 'test/stubs'
+import { describe, it, expect, beforeEach } from 'vitest'
+import * as graphContext from 'modules/Graph/context'
+
+describe('CanvasGraph2D', () => {
+  beforeEach(() => {
+    vi.spyOn(graphContext, 'useGraphContext').mockReturnValue(graphContextBag())
+  })
+
+  it('should apply margin-top to the canvas element when showHeaders is false', () => {
+    const selectedCommit = commit({ hash: 'selected' })
+
+    vi.spyOn(gitContext, 'useGitContext').mockReturnValue(
+      gitContextBag({
+        showHeaders: false,
+        selectedCommit,
+        graphData: graphData({
+          hashToCommit: new Map([[selectedCommit.hash, selectedCommit]]),
+          positions: new Map([[selectedCommit.hash, [0, 0]]])
+        })
+      })
+    )
+
+    render(<Canvas2DGraph />)
+
+    expect(screen.getByTestId('graph-2d-canvas')).toHaveStyle('margin-top: 12px')
+  })
+
+  it('should NOT apply margin-top to the canvas element when showHeaders is true', () => {
+    const selectedCommit = commit({ hash: 'selected' })
+
+    vi.spyOn(gitContext, 'useGitContext').mockReturnValue(
+      gitContextBag({
+        showHeaders: true,
+        selectedCommit,
+        graphData: graphData({
+          hashToCommit: new Map([[selectedCommit.hash, selectedCommit]]),
+          positions: new Map([[selectedCommit.hash, [0, 0]]])
+        })
+      })
+    )
+
+    render(<Canvas2DGraph />)
+
+    expect(screen.getByTestId('graph-2d-canvas')).toHaveStyle('margin-top: undefined')
+  })
+})
\ No newline at end of file

From 4e6ee4a43196faf6fe5dbb567b617e19a79327e8 Mon Sep 17 00:00:00 2001
From: Thomas Plumpton <Thomas.Plumpton@hotmail.co.uk>
Date: Sat, 7 Feb 2026 16:31:45 +0000
Subject: [PATCH 4/5] test(graph): add missing snapshot updates

---
 packages/library/src/__snapshots__/GitLogPaged.spec.tsx.snap | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/library/src/__snapshots__/GitLogPaged.spec.tsx.snap b/packages/library/src/__snapshots__/GitLogPaged.spec.tsx.snap
index 600267b5..fa749957 100644
--- a/packages/library/src/__snapshots__/GitLogPaged.spec.tsx.snap
+++ b/packages/library/src/__snapshots__/GitLogPaged.spec.tsx.snap
@@ -276,6 +276,7 @@ exports[`GitLogPaged > should render correctly and match the snapshot the pagina
       >
         <canvas
           class="canvas"
+          data-testid="graph-2d-canvas"
           height="1600"
           style="width: 120px; height: 1600px;"
           width="120"

From da9e1aa3a60029dd51817c4ae82b63261ab28eb0 Mon Sep 17 00:00:00 2001
From: Thomas Plumpton <Thomas.Plumpton@hotmail.co.uk>
Date: Sat, 7 Feb 2026 16:33:33 +0000
Subject: [PATCH 5/5] test(graph): add missing snapshot updates

---
 packages/library/src/__snapshots__/GitLog.spec.tsx.snap | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/library/src/__snapshots__/GitLog.spec.tsx.snap b/packages/library/src/__snapshots__/GitLog.spec.tsx.snap
index 0ec30c18..ce755623 100644
--- a/packages/library/src/__snapshots__/GitLog.spec.tsx.snap
+++ b/packages/library/src/__snapshots__/GitLog.spec.tsx.snap
@@ -3691,6 +3691,7 @@ exports[`GitLog > Canvas2D Graph > should render correctly and match the snapsho
       >
         <canvas
           class="canvas"
+          data-testid="graph-2d-canvas"
           height="18960"
           style="width: 168px; height: 18960px;"
           width="168"