From d07ee2c2e1a85c1a96c1ee4a5bf30d75bdbd17a9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C5=ABdolfs=20O=C5=A1i=C5=86=C5=A1?= <rudolfs@osins.org>
Date: Fri, 13 Dec 2024 16:32:38 +0100
Subject: [PATCH] Fix FileDiff corner styling

---
 public/index.css                         | 15 +++++++++++++
 src/components/Changeset.svelte          | 12 +++++-----
 src/components/Changeset/FileDiff.svelte |  1 -
 src/components/File.svelte               | 28 +++++++++++++++++++-----
 4 files changed, 45 insertions(+), 11 deletions(-)

diff --git a/public/index.css b/public/index.css
index ac2e9288b..bb5430034 100644
--- a/public/index.css
+++ b/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,
diff --git a/src/components/Changeset.svelte b/src/components/Changeset.svelte
index 5e6f48397..0a72fa038 100644
--- a/src/components/Changeset.svelte
+++ b/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>
diff --git a/src/components/Changeset/FileDiff.svelte b/src/components/Changeset/FileDiff.svelte
index 3d19db87a..253e34d71 100644
--- a/src/components/Changeset/FileDiff.svelte
+++ b/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 {
diff --git a/src/components/File.svelte b/src/components/File.svelte
index 293c748f6..4745274b0 100644
--- a/src/components/File.svelte
+++ b/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>