diff --git a/e2e/dashboard.test.ts b/e2e/dashboard.test.ts index 66ea581..225eaf1 100644 --- a/e2e/dashboard.test.ts +++ b/e2e/dashboard.test.ts @@ -32,6 +32,7 @@ test.beforeEach(async ({ context }) => { }); test('dashboard surfaces map stops, stats, and trip status', async ({ page }) => { + const screenshotPath = test.info().outputPath('dashboard.png'); const suffix = uniqueSuffix(); const pastStart = formatDate(-18); const pastEnd = formatDate(-15); @@ -72,4 +73,6 @@ test('dashboard surfaces map stops, stats, and trip status', async ({ page }) => await expect(page.getByTestId('stat-past-trips')).toHaveText('1'); await expect(page.getByTestId('stat-countries')).toHaveText('1'); + + await page.screenshot({ path: screenshotPath, fullPage: true }); }); diff --git a/src/routes/(protected)/dashboard/+page.svelte b/src/routes/(protected)/dashboard/+page.svelte index 97c587c..3bfda2e 100644 --- a/src/routes/(protected)/dashboard/+page.svelte +++ b/src/routes/(protected)/dashboard/+page.svelte @@ -5,9 +5,10 @@ let { data } = $props(); const dashboard = $derived(data.dashboard) as DashboardData; + const mapLongitudeOffset = 12; const markers = $derived( dashboard.mapStops.map((stop: DashboardMapStop, index: number) => { - const x = ((stop.lon + 180) / 360) * 100; + const x = ((stop.lon + 180 - mapLongitudeOffset) / 360) * 100; const y = ((90 - stop.lat) / 180) * 100; return { ...stop, @@ -79,26 +80,16 @@ Dashboard — Trips - - -
-
-
-
-
-

Overview

-

Dashboard

-

- Welcome back, {data.session.user?.name ?? data.session.user?.email}. Here’s a quick pulse on - your travel story. -

-
+
+

Overview

+

Dashboard

+

+ Welcome back, {data.session.user?.name ?? data.session.user?.email}. Here’s a quick pulse on your + travel story. +

@@ -106,23 +97,15 @@ class="relative overflow-hidden rounded-3xl border border-slate-200 bg-slate-950/90 p-6 text-white" data-testid="trip-map" > -
-
-
-
+
+
+ - - - - - - - - + />
@@ -325,24 +308,15 @@