From 801f2ae09ccb29660c8af32978343b8f29a1d992 Mon Sep 17 00:00:00 2001
From: WardPearce <wardpearce@pm.me>
Date: Sat, 13 Dec 2025 12:30:31 +1300
Subject: [PATCH] Improved mobile pip

---
 materialious/src/routes/(app)/+layout.svelte  | 40 ++++++++++---------
 .../routes/(no-layout)/tv/[slug]/+page.svelte |  1 +
 2 files changed, 23 insertions(+), 18 deletions(-)

diff --git a/materialious/src/routes/(app)/+layout.svelte b/materialious/src/routes/(app)/+layout.svelte
index af6a5df4..3459f339 100644
--- a/materialious/src/routes/(app)/+layout.svelte
+++ b/materialious/src/routes/(app)/+layout.svelte
@@ -411,13 +411,24 @@
 				>
 					<div class="pip-info">
 						{#if playerIsPip}
-							<nav>
-								<h6 class="max">{truncate($playerState.data.video.title, 20)}</h6>
-								<button class="border m l" onclick={() => playerState.set(undefined)}>
-									<i>close</i>
-								</button>
-							</nav>
-							<div class="space"></div>
+							<div>
+								<nav>
+									<h6 class="max">{truncate($playerState.data.video.title, 25)}</h6>
+									<button class="border m l" onclick={() => playerState.set(undefined)}>
+										<i>close</i>
+									</button>
+								</nav>
+								<nav class="s">
+									<a
+										class="button border"
+										href={resolve(`/watch/[videoId]`, { videoId: $playerState.data.video.videoId })}
+										><i>keyboard_arrow_right</i></a
+									>
+									<button class="border" onclick={() => playerState.set(undefined)}>
+										<i>close</i>
+									</button>
+								</nav>
+							</div>
 						{/if}
 						<div class="player">
 							{#key $playerState.data.video.videoId}
@@ -426,17 +437,6 @@
 						</div>
 					</div>
 					{#if playerIsPip}
-						<nav class="s">
-							<a
-								class="button border"
-								href={resolve(`/watch/[videoId]`, { videoId: $playerState.data.video.videoId })}
-								><i>keyboard_arrow_right</i></a
-							>
-							<button class="border" onclick={() => playerState.set(undefined)}>
-								<i>close</i>
-							</button>
-						</nav>
-
 						<nav class="m l">
 							<Author channel={$playerState.data.video} hideSubscribe={true} />
 							<div class="max"></div>
@@ -533,5 +533,9 @@
 			display: flex;
 			justify-content: space-between;
 		}
+
+		.pip h6 {
+			font-size: 1em;
+		}
 	}
 </style>
diff --git a/materialious/src/routes/(no-layout)/tv/[slug]/+page.svelte b/materialious/src/routes/(no-layout)/tv/[slug]/+page.svelte
index d10a30ef..12725339 100644
--- a/materialious/src/routes/(no-layout)/tv/[slug]/+page.svelte
+++ b/materialious/src/routes/(no-layout)/tv/[slug]/+page.svelte
@@ -119,6 +119,7 @@
 	<article id="shown-info" transition:fade>
 		<h5>{letterCase(data.video.title)}</h5>
 		<Author channel={data.video} />
+		<div class="space"></div>
 		<LikesDislikes video={data.video} returnYTDislikes={data.streamed.returnYTDislikes} />
 		<article class="border">
 			<Description video={data.video} description={data.content.description} />