fix Svelte 5 SSR markup warning

tradingstrategy-ai · Dec 9, 2024 · d1410ed · d1410ed
1 parent 7b2daaf
commit d1410ed
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 8 deletions.
diff --git a/src/routes/strategies/[strategy]/[status=positionStatus]-positions/PositionFlag.svelte b/src/routes/strategies/[strategy]/[status=positionStatus]-positions/PositionFlag.svelte
@@ -1,10 +1,15 @@
 <script lang="ts">
-	import type { ComponentProps } from 'svelte';
+	import type { ComponentProps, Snippet } from 'svelte';
 	import { DataBadge, Tooltip } from '$lib/components';
 
-	export let label: string;
-	export let title: string;
-	export let status: ComponentProps<DataBadge>['status'] = 'default';
+	type Props = {
+		label: string;
+		title: string;
+		status?: ComponentProps<DataBadge>['status'];
+		children: Snippet;
+	};
+
+	let { label, title, status = 'default', children }: Props = $props();
 </script>
 
 <Tooltip>
@@ -14,7 +19,7 @@
 
 	<div slot="popup" class="tooltip-content">
 		<h4>{title}</h4>
-		<slot />
+		{@render children()}
 	</div>
 </Tooltip>
 
@@ -31,6 +36,7 @@
 
 	.tooltip-content {
 		h4 {
+			margin-bottom: 0.75rem;
 			font: var(--f-heading-xs-medium);
 			letter-spacing: var(--f-heading-xs-spacing, normal);
 		}

diff --git a/src/routes/strategies/[strategy]/[status=positionStatus]-positions/RemarksCell.svelte b/src/routes/strategies/[strategy]/[status=positionStatus]-positions/RemarksCell.svelte
@@ -58,9 +58,7 @@
 
 	{#if admin && position.hasInconsistentProfitability}
 		<PositionFlag status="warning" label="P" title="Profitability data inconsistent">
-			<p>
-				<Alert size="xs" status="info" title="Note">This info is only displayed to admin users.</Alert>
-			</p>
+			<Alert size="xs" status="info" title="Note">This info is only displayed to admin users.</Alert>
 			<p>
 				This position has inconsistent profitability data. The value from position stats does not match the result of
 				comparing all entry and exit trades.