diff --git a/src/views/projects/Commit/CommitTeaser.svelte b/src/views/projects/Commit/CommitTeaser.svelte
index af09b7a0b..f5768fa93 100644
--- a/src/views/projects/Commit/CommitTeaser.svelte
+++ b/src/views/projects/Commit/CommitTeaser.svelte
@@ -28,6 +28,7 @@
   }
   .commit-teaser:hover {
     background-color: var(--color-foreground-2);
+    cursor: pointer;
   }
   .commit-teaser:first-child {
     border-top-left-radius: var(--border-radius-small);
@@ -37,6 +38,9 @@
     border-bottom-left-radius: var(--border-radius-small);
     border-bottom-right-radius: var(--border-radius-small);
   }
+  .commit-teaser:not(:last-child) {
+    border-bottom: 1px solid var(--color-background);
+  }
   .commit-teaser {
     display: flex;
     align-items: center;
@@ -84,7 +88,8 @@
   }
 </style>
 
-<div class="commit-teaser">
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<div class="commit-teaser" on:click>
   <div class="column-left">
     <div class="header">
       <div class="summary" use:twemoji>
diff --git a/src/views/projects/History.svelte b/src/views/projects/History.svelte
index 1b5521209..c30a637a5 100644
--- a/src/views/projects/History.svelte
+++ b/src/views/projects/History.svelte
@@ -40,22 +40,6 @@
   .commit-group-headers {
     margin-bottom: 2rem;
   }
-  .commit:not(:last-child) {
-    border-bottom: 1px dashed var(--color-background);
-  }
-  .commit:hover {
-    background-color: var(--color-foreground-2);
-    cursor: pointer;
-    border-radius: var(--border-radius-small);
-  }
-  .commit:first-child {
-    border-top-left-radius: var(--border-radius-small);
-    border-top-right-radius: var(--border-radius-small);
-  }
-  .commit:last-child {
-    border-bottom-left-radius: var(--border-radius-small);
-    border-bottom-right-radius: var(--border-radius-small);
-  }
 
   @media (max-width: 960px) {
     .history {
@@ -75,17 +59,15 @@
           </header>
           <div class="commit-group-headers">
             {#each group.commits as commit (commit.commit.id)}
-              <!-- svelte-ignore a11y-click-events-have-key-events -->
-              <div
-                class="commit"
+              <CommitTeaser
+                {commit}
                 on:click={() => {
                   router.updateProjectRoute({
                     view: { resource: "commits" },
                     revision: commit.commit.id,
                   });
-                }}>
-                <CommitTeaser {commit} on:browseCommit={browseCommit} />
-              </div>
+                }}
+                on:browseCommit={browseCommit} />
             {/each}
           </div>
         </div>
diff --git a/tests/e2e/project/commits.spec.ts b/tests/e2e/project/commits.spec.ts
index 662923396..c5b674241 100644
--- a/tests/e2e/project/commits.spec.ts
+++ b/tests/e2e/project/commits.spec.ts
@@ -47,7 +47,9 @@ test("peer and branch switching", async ({ page }) => {
       "feature/branch d6318f7",
     );
     await expect(page.getByText("Thursday, November 17, 2022")).toBeVisible();
-    await expect(page.locator(".commit-group-headers .commit")).toHaveCount(10);
+    await expect(
+      page.locator(".commit-group-headers .commit-teaser"),
+    ).toHaveCount(10);
 
     await page.getByTitle("Change branch").click();
     await page.locator("text=orphaned-branch").click();
@@ -157,7 +159,7 @@ test("relative timestamps", async ({ page }) => {
     await expect(latestCommit).toContainText("2b32f6f");
   }
 
-  const earliestCommit = page.locator(".commit").last();
+  const earliestCommit = page.locator(".commit-teaser").last();
   await expect(earliestCommit).toContainText(
     "Alice Liddell committed last month",
   );