From cc60a57e3e66549e6aa9251a3ec1fda2571bc8f3 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Mon, 15 Dec 2025 12:51:19 -0800
Subject: [PATCH] minor ui tweaks

- fix datepicker css class name conflict
- remove border and margin from detail header/scaffold
---
 src/lib/components/ui/DatePicker.svelte       | 25 ++++++++++---------
 src/lib/components/ui/DetailsHeader.svelte    |  1 -
 .../database/detail/DetailScaffold.svelte     |  1 -
 3 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/src/lib/components/ui/DatePicker.svelte b/src/lib/components/ui/DatePicker.svelte
index b26193eb..0c0652a5 100644
--- a/src/lib/components/ui/DatePicker.svelte
+++ b/src/lib/components/ui/DatePicker.svelte
@@ -104,7 +104,7 @@
 				</BitsDatePicker.Trigger>
 			</div>
 
-			<BitsDatePicker.Content class="content" sideOffset={8}>
+			<BitsDatePicker.Content class="date-picker-content" sideOffset={8}>
 				<BitsDatePicker.Calendar class="calendar">
 					{#snippet children({ months, weekdays })}
 						<BitsDatePicker.Header class="calendar-header">
@@ -175,7 +175,7 @@
 			</BitsDatePicker.Trigger>
 		</div>
 
-		<BitsDatePicker.Content class="content" sideOffset={8}>
+		<BitsDatePicker.Content class="date-picker-content" sideOffset={8}>
 			<BitsDatePicker.Calendar class="calendar">
 				{#snippet children({ months, weekdays })}
 					<BitsDatePicker.Header class="calendar-header">
@@ -313,7 +313,8 @@
 		}
 	}
 
-	:global(.content) {
+	// Portalled content - use specific class name to avoid conflicts
+	:global(.date-picker-content) {
 		z-index: 50;
 		background-color: $grey-85;
 		border-radius: $card-corner;
@@ -322,26 +323,26 @@
 		border: 1px solid $grey-80;
 	}
 
-	:global(.calendar) {
+	:global(.date-picker-content .calendar) {
 		display: flex;
 		flex-direction: column;
 		gap: $unit;
 	}
 
-	:global(.calendar-header) {
+	:global(.date-picker-content .calendar-header) {
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
 		padding-bottom: $unit;
 	}
 
-	:global(.heading) {
+	:global(.date-picker-content .heading) {
 		font-size: $font-regular;
 		font-weight: $medium;
 		color: var(--text-primary);
 	}
 
-	:global(.nav-button) {
+	:global(.date-picker-content .nav-button) {
 		display: flex;
 		align-items: center;
 		justify-content: center;
@@ -365,16 +366,16 @@
 		}
 	}
 
-	:global(.grid) {
+	:global(.date-picker-content .grid) {
 		border-collapse: collapse;
 	}
 
-	:global(.grid-row) {
+	:global(.date-picker-content .grid-row) {
 		display: flex;
 		gap: $unit-fourth;
 	}
 
-	:global(.head-cell) {
+	:global(.date-picker-content .head-cell) {
 		width: 32px;
 		height: 32px;
 		display: flex;
@@ -385,13 +386,13 @@
 		color: var(--text-tertiary);
 	}
 
-	:global(.cell) {
+	:global(.date-picker-content .cell) {
 		width: 32px;
 		height: 32px;
 		padding: 0;
 	}
 
-	:global(.day) {
+	:global(.date-picker-content .day) {
 		width: 100%;
 		height: 100%;
 		display: flex;
diff --git a/src/lib/components/ui/DetailsHeader.svelte b/src/lib/components/ui/DetailsHeader.svelte
index 30cd0e75..c9319c4e 100644
--- a/src/lib/components/ui/DetailsHeader.svelte
+++ b/src/lib/components/ui/DetailsHeader.svelte
@@ -143,7 +143,6 @@
 		justify-content: space-between;
 		gap: spacing.$unit * 2;
 		padding: spacing.$unit * 2;
-		border-bottom: 1px solid #e5e5e5;
 		// position: sticky;
 		// top: 0;
 		// z-index: 10;
diff --git a/src/lib/features/database/detail/DetailScaffold.svelte b/src/lib/features/database/detail/DetailScaffold.svelte
index fc7be0fa..9d8f0204 100644
--- a/src/lib/features/database/detail/DetailScaffold.svelte
+++ b/src/lib/features/database/detail/DetailScaffold.svelte
@@ -184,7 +184,6 @@
 		border-radius: layout.$card-corner;
 		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 		overflow: visible;
-		margin-top: spacing.$unit-2x;
 		position: relative;
 	}