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 @@ {/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; -
{pair.pair_symbol} - @@ -53,6 +50,11 @@ + +
+ +
{#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[] }; }