From be2db8ca694d98df4ae54f3e7007b678bead16fb Mon Sep 17 00:00:00 2001
From: Ken Kunz <kennethkunz@gmail.com>
Date: Mon, 9 Dec 2024 00:05:47 -0600
Subject: [PATCH] fix Mobile Safari tr.targetable bug

- table rows can't be relatively positioned in Mobile Safari
- fix: position the link relative to td, set width to table width
---
 src/lib/components/TargetableLink.svelte      | 24 ++++++++++++++++
 src/lib/components/datatable/TableBody.svelte |  1 +
 src/lib/momentum/MomentumTable.svelte         | 28 ++++++++++---------
 .../[chain=slug]/TradingEntitiesTable.svelte  |  5 +++-
 .../[direction=momentum]/+page.svelte         |  4 +--
 .../top-list/[direction=momentum]/+page.ts    |  3 +-
 6 files changed, 48 insertions(+), 17 deletions(-)

diff --git a/src/lib/components/TargetableLink.svelte b/src/lib/components/TargetableLink.svelte
index 2f2028934..c27cbfb92 100644
--- a/src/lib/components/TargetableLink.svelte
+++ b/src/lib/components/TargetableLink.svelte
@@ -48,4 +48,28 @@ as the link target.
 			z-index: 2;
 		}
 	}
+
+	/* special case for targetable tr elements to address Mobile Safari bug */
+	:global(tr.targetable td:last-child) {
+		position: relative;
+		overflow: visible;
+
+		a {
+			--container-width: calc(100cqw - (2 * var(--container-margin)));
+			width: var(--table-width, var(--container-width));
+			left: auto;
+		}
+
+		/* revert special-case styles for responsive datatables below "small" breakpoint */
+		@media (--viewport-sm-down) {
+			:global(table.datatable.responsive) & {
+				position: static;
+
+				a {
+					width: auto;
+					left: 0;
+				}
+			}
+		}
+	}
 </style>
diff --git a/src/lib/components/datatable/TableBody.svelte b/src/lib/components/datatable/TableBody.svelte
index dc09464ef..79960fe4a 100644
--- a/src/lib/components/datatable/TableBody.svelte
+++ b/src/lib/components/datatable/TableBody.svelte
@@ -18,6 +18,7 @@
 	}
 </script>
 
+<!-- --table-width needed for proper tr.targetable styling  -->
 <tbody {...attrs}>
 	{#each rows as row, pageRowIndex (row.id)}
 		<Subscribe rowAttrs={row.attrs()} let:rowAttrs>
diff --git a/src/lib/momentum/MomentumTable.svelte b/src/lib/momentum/MomentumTable.svelte
index 58beb4af7..23a7bb3f8 100644
--- a/src/lib/momentum/MomentumTable.svelte
+++ b/src/lib/momentum/MomentumTable.svelte
@@ -1,9 +1,5 @@
-<script lang="ts">
-	import UpDownCell from '$lib/components/UpDownCell.svelte';
-	import TargetableLink from '$lib/components/TargetableLink.svelte';
-	import { formatPriceChange } from '$lib/helpers/formatters';
-
-	interface MomentumPair {
+<script lang="ts" module>
+	export type MomentumPair = {
 		chain_name: string;
 		chain_slug: string;
 		exchange_name: string;
@@ -12,10 +8,15 @@
 		pair_slug: string;
 		pair_symbol: string;
 		price_change_24h: number;
-	}
+	};
+</script>
 
-	// Trading pairs to render in this momentum table
-	export let pairs: MomentumPair[];
+<script lang="ts">
+	import UpDownCell from '$lib/components/UpDownCell.svelte';
+	import TargetableLink from '$lib/components/TargetableLink.svelte';
+	import { formatPriceChange } from '$lib/helpers/formatters';
+
+	let { pairs }: { pairs: MomentumPair[] } = $props();
 </script>
 
 <table class="momentum-table datatable">
@@ -37,10 +38,6 @@
 
 				<td class="pair">
 					{pair.pair_symbol}
-					<TargetableLink
-						href="/trading-view/{pair.chain_slug}/{pair.exchange_slug}/{pair.pair_slug}"
-						label="View pair details"
-					/>
 				</td>
 
 				<td class="exchange">
@@ -53,6 +50,11 @@
 
 				<td class="price-change">
 					<UpDownCell value={pair.price_change_24h} formatter={formatPriceChange} />
+
+					<TargetableLink
+						href="/trading-view/{pair.chain_slug}/{pair.exchange_slug}/{pair.pair_slug}"
+						label="View {pair.pair_symbol} pair details"
+					/>
 				</td>
 			</tr>
 		{/each}
diff --git a/src/routes/trading-view/[chain=slug]/TradingEntitiesTable.svelte b/src/routes/trading-view/[chain=slug]/TradingEntitiesTable.svelte
index 52c34fc29..7147f5a42 100644
--- a/src/routes/trading-view/[chain=slug]/TradingEntitiesTable.svelte
+++ b/src/routes/trading-view/[chain=slug]/TradingEntitiesTable.svelte
@@ -7,9 +7,12 @@
 	export let loading = false;
 	export let rows: TradingEntityRow[];
 	export let getHref: Formatter<TradingEntityRow>;
+
+	let offsetWidth: number;
 </script>
 
-<table class="trading-entities-table datatable" class:loading>
+<!-- --table-width needed for proper tr.targetable styling  -->
+<table class="trading-entities-table datatable" class:loading bind:offsetWidth style:--table-width="{offsetWidth}px">
 	<tbody>
 		{#each rows as row}
 			<tr class="targetable">
diff --git a/src/routes/trading-view/top-list/[direction=momentum]/+page.svelte b/src/routes/trading-view/top-list/[direction=momentum]/+page.svelte
index bc95c3dd9..1079e721b 100644
--- a/src/routes/trading-view/top-list/[direction=momentum]/+page.svelte
+++ b/src/routes/trading-view/top-list/[direction=momentum]/+page.svelte
@@ -6,8 +6,8 @@
 	import MomentumTable from '$lib/momentum/MomentumTable.svelte';
 	import { HeroBanner, Section } from '$lib/components';
 
-	export let data;
-	$: up = data.direction === 'up';
+	let { data } = $props();
+	let up = $derived(data.direction === 'up');
 </script>
 
 <svelte:head>
diff --git a/src/routes/trading-view/top-list/[direction=momentum]/+page.ts b/src/routes/trading-view/top-list/[direction=momentum]/+page.ts
index 946e9a892..d54066ef4 100644
--- a/src/routes/trading-view/top-list/[direction=momentum]/+page.ts
+++ b/src/routes/trading-view/top-list/[direction=momentum]/+page.ts
@@ -1,3 +1,4 @@
+import type { MomentumPair } from '$lib/momentum/MomentumTable.svelte';
 import { fetchPublicApi } from '$lib/helpers/public-api';
 
 export async function load({ params, fetch }) {
@@ -7,6 +8,6 @@ export async function load({ params, fetch }) {
 
 	return {
 		direction,
-		pairs: data[`top_${direction}_24h_min_liq_1m`]
+		pairs: data[`top_${direction}_24h_min_liq_1m`] as MomentumPair[]
 	};
 }