TomPlum · TomPlum · Feb 7, 2026 · Feb 7, 2026 · Feb 7, 2026 · Feb 7, 2026
diff --git 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
diff --git 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
@@ -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__/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"
@@ -22732,7 +22733,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 +85369,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 +144983,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 +152751,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 +211464,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 +215696,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"

diff --git 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"
@@ -1763,7 +1764,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 +3913,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 +6855,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
@@ -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
diff --git 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
@@ -9,10 +9,10 @@ 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 { graphWidth, visibleCommits, nodeSize, nodeTheme, orientation } = useGraphContext()
 
   const {
@@ -31,7 +31,9 @@ export const Canvas2DGraph = () => {
     indexCommit,
     isIndexVisible,
     selectedCommit,
-    previewedCommit
+    previewedCommit,
+    isServerSidePaginated,
+    showHeaders
   } = useGitContext()
 
   const getNodeColours = useCallback<GetCanvasRendererColoursFunction>((columnIndex: number) => {
@@ -168,6 +170,10 @@ export const Canvas2DGraph = () => {
       width={canvasWidth}
       height={canvasHeight}
       className={styles.canvas}
+      data-testid='graph-2d-canvas'
+      style={{
+        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
@@ -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')
+  })
+})
diff --git 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
@@ -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"