Use same node version on CI as locally

.github/workflows/check-unit-test.yml

@@ -8,7 +8,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v4
         with:
-          node-version: "20.9.0"
+          node-version: "22.11.0"
       - name: Checkout
         uses: actions/checkout@v4
       - run: npm ci

.github/workflows/check.yml

@@ -9,7 +9,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v4
         with:
-          node-version: "20.9.0"
+          node-version: "22.11.0"
       - uses: actions/checkout@v4
       - run: npm ci
       - run: npm run check-js

src/components/CommitsContainer.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+
+  import Border from "./Border.svelte";
+  import Icon from "./Icon.svelte";
+  import NakedButton from "./NakedButton.svelte";
+
+  interface Props {
+    leftHeader: Snippet;
+    children: Snippet;
+    expanded: boolean;
+  }
+
+  /* eslint-disable prefer-const */
+  let { leftHeader, children, expanded }: Props = $props();
+  /* eslint-enable prefer-const */
+</script>
+
+<style>
+  .header {
+    display: flex;
+    align-items: center;
+    height: 2rem;
+    padding-left: 0.25rem;
+    font-size: var(--font-size-small);
+    background-color: var(--color-background-default);
+  }
+
+  .left {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+  }
+  .divider {
+    width: calc(100% + 4px);
+    position: relative;
+    top: -6px;
+    left: -2px;
+    z-index: 1;
+    height: 2px;
+    background-color: var(--color-fill-ghost);
+  }
+</style>
+
+<Border
+  variant="ghost"
+  styleFlexDirection="column"
+  styleAlignItems="flex-start">
+  <div class="header" class:collapsed={!expanded}>
+    <div class="left">
+      <NakedButton
+        stylePadding="0 4px"
+        variant="ghost"
+        onclick={async () => {
+          expanded = !expanded;
+        }}>
+        <Icon name={expanded ? "chevron-down" : "chevron-right"} />
+      </NakedButton>
+      {@render leftHeader()}
+    </div>
+  </div>
+
+  {#if expanded}
+    <div class="divider"></div>
+    <div style:width="100%">
+      {@render children()}
+    </div>
+  {/if}
+</Border>

src/components/Revision.svelte

@@ -20,7 +20,7 @@
   import CobCommitTeaser from "./CobCommitTeaser.svelte";
   import CommentComponent from "@app/components/Comment.svelte";
   import CommentToggleInput from "@app/components/CommentToggleInput.svelte";
-  import File from "@app/components/File.svelte";
+  import CommitsContainer from "@app/components/CommitsContainer.svelte";
   import Icon from "@app/components/Icon.svelte";
   import Id from "./Id.svelte";
   import NakedButton from "./NakedButton.svelte";
@@ -274,16 +274,16 @@
     font-size: 0.875rem;
     margin-left: 0.5rem;
     gap: 0.5rem;
-    padding: 1rem 0.5rem 1rem 1rem;
+    padding: 1rem 0.5rem 0.5rem 1rem;
     border-left: 1px solid var(--color-fill-separator);
   }
   .commit:last-of-type::after {
     content: "";
     position: absolute;
     left: -18.5px;
     top: 14px;
-    bottom: -1rem;
-    border-left: 4px solid var(--color-background-float);
+    bottom: -0.5rem;
+    border-left: 4px solid var(--color-background-default);
   }
   .commit-dot {
     width: 4px;
@@ -416,12 +416,12 @@
     <span class="txt-small">Loading…</span>
   {:then commits}
     <div style:margin-bottom="1rem">
-      <File expanded={filesExpanded}>
+      <CommitsContainer expanded={filesExpanded}>
         {#snippet leftHeader()}
           <div class="txt-semibold">Commits</div>
         {/snippet}
         {#snippet children()}
-          <div style:padding="1rem 1rem 0 1rem">
+          <div style:padding="0 1rem">
             <div
               class="global-flex txt-small"
               style:color="var(--color-foreground-dim)">
@@ -438,7 +438,7 @@
             </div>
           </div>
         {/snippet}
-      </File>
+      </CommitsContainer>
     </div>
   {/await}