From b594a32b96c5f938d892dc6bfbf88c9321aac9b7 Mon Sep 17 00:00:00 2001
From: SkepticMystic <rossk29@gmail.com>
Date: Tue, 7 May 2024 10:19:49 +0200
Subject: [PATCH] fix(view:page): Finalise border rounding (thanks SlRvb <3)

---
 src/components/page_views/TrailView.svelte    | 20 +++++--------------
 .../page_views/TrailViewGrid.svelte           | 14 ++++++++++++-
 .../page_views/TrailViewPath.svelte           |  8 +++++++-
 3 files changed, 25 insertions(+), 17 deletions(-)

diff --git a/src/components/page_views/TrailView.svelte b/src/components/page_views/TrailView.svelte
index f086a995..99fc1ff6 100644
--- a/src/components/page_views/TrailView.svelte
+++ b/src/components/page_views/TrailView.svelte
@@ -128,13 +128,11 @@
 				</div>
 			</div>
 
-			<div class="BC-trail-view">
-				{#if plugin.settings.views.page.trail.format === "grid"}
-					<TrailViewGrid {plugin} all_paths={sorted_paths} />
-				{:else if plugin.settings.views.page.trail.format === "path"}
-					<TrailViewPath {plugin} all_paths={sorted_paths} />
-				{/if}
-			</div>
+			{#if plugin.settings.views.page.trail.format === "grid"}
+				<TrailViewGrid {plugin} all_paths={sorted_paths} />
+			{:else if plugin.settings.views.page.trail.format === "path"}
+				<TrailViewPath {plugin} all_paths={sorted_paths} />
+			{/if}
 		{:else if plugin.settings.views.page.trail.no_path_message}
 			<p class="BC-trail-view-no-path search-empty-state">
 				{plugin.settings.views.page.trail.no_path_message}
@@ -142,11 +140,3 @@
 		{/if}
 	{/key}
 </div>
-
-<style>
-	.BC-trail-view {
-		overflow: hidden;
-		border-radius: var(--radius-m);
-		border: 1px solid var(--background-modifier-border);
-	}
-</style>
diff --git a/src/components/page_views/TrailViewGrid.svelte b/src/components/page_views/TrailViewGrid.svelte
index 7d6ed692..24fc7f74 100644
--- a/src/components/page_views/TrailViewGrid.svelte
+++ b/src/components/page_views/TrailViewGrid.svelte
@@ -51,7 +51,19 @@ grid-template-columns: {'1fr '.repeat(square.at(0)?.length ?? 0)};"
 </div>
 
 <style>
-	.BC-trail-view-item {
+	/* Handles the outer border, with some rounding */
+	.BC-trail-view {
+		/* Don't let the inner cell borders overlow */
+		overflow: hidden;
+		border-radius: var(--radius-m);
 		border: 1px solid var(--background-modifier-border);
 	}
+
+	.BC-trail-view-item {
+		/* Undo the effect of the double border on the top and right side */
+		margin: -1px -1px 0 0;
+		/* Only add borders on the top and right sides, to avoid inner duplications, and some outer duplicates */
+		border-right: 1px solid var(--background-modifier-border);
+		border-top: 1px solid var(--background-modifier-border);
+	}
 </style>
diff --git a/src/components/page_views/TrailViewPath.svelte b/src/components/page_views/TrailViewPath.svelte
index ea2cd43b..8406f8ab 100644
--- a/src/components/page_views/TrailViewPath.svelte
+++ b/src/components/page_views/TrailViewPath.svelte
@@ -11,7 +11,7 @@
 	const reversed = all_paths.map((path) => [...path].reverse());
 </script>
 
-<div class="BC-trail-view flex flex-col gap-1 p-1">
+<div class="BC-trail-view flex flex-col gap-1 px-3 py-2">
 	{#each reversed as path}
 		<div class="BC-trail-view-path flex gap-1.5">
 			{#each path as edge, j}
@@ -42,6 +42,12 @@
 </div>
 
 <style>
+	.BC-trail-view {
+		overflow: hidden;
+		border-radius: var(--radius-m);
+		border: 1px solid var(--background-modifier-border);
+	}
+
 	.BC-trail-view-item-separator::before {
 		content: ">";
 	}