Fix FileDiff corner styling

public/index.css

@@ -133,6 +133,21 @@ body {
     0 100%
   );
 
+  --2px-bottom-corner-fill: polygon(
+    0 0,
+    100% 0,
+    100% calc(100% - 4px),
+    calc(100% - 2px) calc(100% - 4px),
+    calc(100% - 2px) calc(100% - 2px),
+    calc(100% - 4px) calc(100% - 2px),
+    calc(100% - 4px) 100%,
+    4px 100%,
+    4px calc(100% - 2px),
+    2px calc(100% - 2px),
+    2px calc(100% - 4px),
+    0 calc(100% - 4px)
+  );
+
   --3px-corner-fill: polygon(
     0 6px,
     2px 6px,

src/components/Changeset.svelte

@@ -20,10 +20,12 @@
 
 <div class="diff-list">
   {#each diff.files as file}
-    <FileDiff
-      filePath={"path" in file ? file.path : file.newPath}
-      oldFilePath={"oldPath" in file ? file.oldPath : undefined}
-      fileDiff={file.diff}
-      headerBadgeCaption={file.status} />
+    <div style:margin-bottom="1rem">
+      <FileDiff
+        filePath={"path" in file ? file.path : file.newPath}
+        oldFilePath={"oldPath" in file ? file.oldPath : undefined}
+        fileDiff={file.diff}
+        headerBadgeCaption={file.status} />
+    </div>
   {/each}
 </div>

src/components/Changeset/FileDiff.svelte

@@ -65,7 +65,6 @@
 <style>
   .container {
     font-size: var(--font-size-small);
-    background: var(--color-background-float);
     overflow-x: auto;
   }
   .actions {

src/components/File.svelte

@@ -16,9 +16,19 @@
     height: 3rem;
     align-items: center;
     padding: 0 0.5rem 0 1rem;
-    border: 1px solid var(--color-border-hint);
-    background-color: var(--color-background-default);
     z-index: 2;
+    font-size: var(--font-size-small);
+  }
+  .header::after {
+    position: absolute;
+    z-index: -1;
+    content: " ";
+    background-color: var(--color-fill-float-hover);
+    clip-path: var(--2px-top-corner-fill);
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
   }
 
   .sticky {
@@ -36,9 +46,17 @@
   .container {
     position: relative;
     overflow-x: auto;
-    border: 1px solid var(--color-border-hint);
-    border-top: 0;
-    background: var(--color-background-float);
+  }
+  .container::after {
+    position: absolute;
+    z-index: -1;
+    content: " ";
+    background-color: var(--color-background-float);
+    clip-path: var(--2px-bottom-corner-fill);
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
   }
 </style>