fix: improve Ostium vault actions on mobile

Author: miohtama

src/routes/vaults/[vault=slug]/VaultPageHeader.svelte

@@ -15,6 +15,7 @@
 		if (hasSupportedProtocol(vault)) return getVaultProtocolDisplayName(vault);
 		if (vault.link) return new URL(vault.link).host;
 	});
+	let hideCtaOnMobile = $derived(externalSiteName === 'Ostium');
 </script>
 
 <PageHeader>
@@ -25,10 +26,10 @@
 	{/snippet}
 
 	{#snippet cta()}
-		<span class="cta-actions">
+		<span class="cta-actions" class:mobile-hidden={hideCtaOnMobile}>
 			{#if vault.link}
 				<Button href={vault.link} target="_blank" rel="noreferrer">
-					View on {externalSiteName}
+					{externalSiteName === 'Ostium' ? 'Open vault on Ostium' : `View on ${externalSiteName}`}
 				</Button>
 			{/if}
 			<UpdateInfoButton size="md" />
@@ -46,6 +47,12 @@
 		flex-wrap: wrap;
 		align-items: center;
 		gap: 0.75rem;
+
+		&.mobile-hidden {
+			@media (--viewport-sm-down) {
+				display: none;
+			}
+		}
 	}
 
 	.vault-description {

src/routes/vaults/[vault=slug]/VaultTechnicalDetailsTable.svelte

@@ -2,6 +2,7 @@
 	import type { VaultInfo } from '$lib/top-vaults/schemas';
 	import type { Chain } from '$lib/helpers/chain';
 	import { getExplorerUrl } from '$lib/helpers/chain';
+	import Button from '$lib/components/Button.svelte';
 	import MetricsBox from '$lib/components/MetricsBox.svelte';
 	import { CopyWidget, HashAddress, Timestamp, Tooltip } from '$lib/components';
 	import { formatAmount, formatDollar, notFilledMarker } from '$lib/helpers/formatters';
@@ -57,6 +58,9 @@
 	let denominationLogoUrl = $derived(getVaultDenominationLogoUrl(vault, denominationSlug));
 	let denominationHref = $derived(stablecoinMetadata ? getStablecoinDetailsHref(denominationSlug) : undefined);
 	let showExchangeRateRow = $derived(vault.protocol_slug !== 'kinexys');
+	let mobileOstiumHref = $derived(
+		getVaultProtocolDisplayName(vault) === 'Ostium' ? (vault.link ?? undefined) : undefined
+	);
 	let exchangeRateFetchedAt = $derived(
 		vault.denomination_token_rate?.usd_rate_fetched_at ??
 			vault.denomination_token_rate?.source_currency_usd_rate_fetched_at ??
@@ -353,13 +357,34 @@
 			</tbody>
 		</table>
 	</div>
+
+	{#if mobileOstiumHref}
+		<div class="mobile-ostium-link">
+			<Button class="mobile-ostium-button" href={mobileOstiumHref} target="_blank" rel="noreferrer"
+				>Open vault on Ostium</Button
+			>
+		</div>
+	{/if}
 </MetricsBox>
 
 <style>
 	.table-wrapper {
 		overflow-x: auto;
 	}
 
+	.mobile-ostium-link {
+		display: none;
+		margin-top: 1rem;
+
+		@media (--viewport-sm-down) {
+			display: block;
+		}
+
+		:global(.mobile-ostium-button) {
+			--button-width: 100%;
+		}
+	}
+
 	.details-table {
 		width: 100%;
 		border-collapse: collapse;