Fixes to video sharing

materialious/src/lib/components/ShareVideo.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
+	import { instanceStore } from '$lib/store';
 	import { Clipboard } from '@capacitor/clipboard';
 	import { Capacitor } from '@capacitor/core';
 	import { _ } from 'svelte-i18n';
+	import { get } from 'svelte/store';
 	import type { Notification, PlaylistPageVideo, Video, VideoBase } from '../api/model';
 
 	interface Props {
@@ -11,28 +13,28 @@
 	let { video }: Props = $props();
 </script>
 
-{#if !Capacitor.isNativePlatform()}
-	<a
-		class="row"
-		href="#copy"
-		onclick={async () =>
-			await Clipboard.write({ string: `${location.origin}/watch/${video.videoId}` })}
-	>
-		<div class="min">{$_('player.share.materialiousLink')}</div></a
-	>
-{/if}
-<a
-	href="#copy"
+<button
+	class="row"
+	onclick={async () => {
+		if (Capacitor.isNativePlatform()) {
+			await Clipboard.write({ string: `${get(instanceStore)}/watch/${video.videoId}` });
+		} else {
+			await Clipboard.write({ string: `${location.origin}/watch/${video.videoId}` });
+		}
+	}}
+>
+	<div class="min">{$_('player.share.materialiousLink')}</div></button
+>
+<button
 	class="row"
 	onclick={async () =>
 		await Clipboard.write({ string: `https://redirect.invidious.io/watch?v=${video.videoId}` })}
 >
-	<div class="min">{$_('player.share.invidiousRedirect')}</div></a
-><a
+	<div class="min">{$_('player.share.invidiousRedirect')}</div></button
+><button
 	class="row"
-	href="#copy"
 	onclick={async () =>
 		await Clipboard.write({ string: `https://www.youtube.com/watch?v=${video.videoId}` })}
 >
-	<div class="min">{$_('player.share.youtubeLink')}</div></a
+	<div class="min">{$_('player.share.youtubeLink')}</div></button
 >

materialious/src/lib/css/global.css

@@ -17,6 +17,25 @@ main.root {
 	overflow-y: auto;
 }
 
+article, dialog {
+	border-radius: .25rem !important;
+}
+
+.row {
+	padding: 1em !important;
+}
+
+button.row {
+	padding: 0 !important;
+	background-color: transparent !important;
+	border: none !important;
+	color: var(--on-surface) !important;
+}
+
+button.row:hover {
+	box-shadow: none !important;
+	background-color: transparent !important;
+}
 
 @media screen and (max-width: 650px) {
 	dialog.right {