From ca28fc28b20907e977d154a22215a68c0678301f Mon Sep 17 00:00:00 2001
From: Sebastian Martinez <me@sebastinez.dev>
Date: Tue, 7 Nov 2023 08:12:44 +0100
Subject: [PATCH] Display a top and bottom border in the file tree when
 overflowing

---
 src/views/projects/Source.svelte | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/views/projects/Source.svelte b/src/views/projects/Source.svelte
index edd43b976..985b186f4 100644
--- a/src/views/projects/Source.svelte
+++ b/src/views/projects/Source.svelte
@@ -29,6 +29,12 @@
 
   // Whether the mobile file tree is visible.
   let mobileFileTree = false;
+  let treeElement: HTMLElement | undefined = undefined;
+  let treeOverflow: boolean = false;
+
+  $: if (treeElement) {
+    treeOverflow = treeElement.scrollHeight > treeElement.offsetHeight;
+  }
 
   const api = new HttpdClient(baseUrl);
 
@@ -98,6 +104,10 @@
     width: 17.5rem;
     padding-right: 0.25rem;
   }
+  .source-tree-overflow {
+    border-bottom: 1px solid var(--color-fill-separator);
+    border-top: 1px solid var(--color-fill-separator);
+  }
   .sticky {
     position: sticky;
     top: 2rem;
@@ -174,7 +184,10 @@
   <div class="container center-content">
     {#if tree.entries.length > 0}
       <div class="column-left">
-        <div class="source-tree sticky">
+        <div
+          bind:this={treeElement}
+          class="source-tree sticky"
+          class:source-tree-overflow={treeOverflow}>
           <TreeComponent
             projectId={project.id}
             {revision}