diff --git a/src/lib/components/TargetableLink.svelte b/src/lib/components/TargetableLink.svelte
index 2f202893..c27cbfb9 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;
+ }
+ }
+ }
+ }
diff --git a/src/lib/components/datatable/TableBody.svelte b/src/lib/components/datatable/TableBody.svelte
index dc09464e..79960fe4 100644
--- a/src/lib/components/datatable/TableBody.svelte
+++ b/src/lib/components/datatable/TableBody.svelte
@@ -18,6 +18,7 @@
}
+
{#each rows as row, pageRowIndex (row.id)}
diff --git a/src/lib/momentum/MomentumTable.svelte b/src/lib/momentum/MomentumTable.svelte
index 58beb4af..23a7bb3f 100644
--- a/src/lib/momentum/MomentumTable.svelte
+++ b/src/lib/momentum/MomentumTable.svelte
@@ -1,9 +1,5 @@
-
- // Trading pairs to render in this momentum table
- export let pairs: MomentumPair[];
+
@@ -37,10 +38,6 @@
{pair.pair_symbol}
-
|
@@ -53,6 +50,11 @@
|
+
+
|
{/each}
diff --git a/src/routes/trading-view/[chain=slug]/TradingEntitiesTable.svelte b/src/routes/trading-view/[chain=slug]/TradingEntitiesTable.svelte
index 52c34fc2..7147f5a4 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;
+
+ let offsetWidth: number;
-
+
+
{#each rows as row}
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 bc95c3dd..1079e721 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');
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 946e9a89..d54066ef 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[]
};
}