From 48aa0751d90e789651640499698567b260e7d6f0 Mon Sep 17 00:00:00 2001
From: Christian Bager Bach Houmann <christian@bagerbach.com>
Date: Tue, 16 Jun 2026 16:30:35 +0200
Subject: [PATCH] feat(player): scale episode title font size to its length
 (#81)

The player rendered every episode title at a fixed 1.125rem, so long
podcast titles dominated the player pane. Reduce the base to 1rem and
ease the size down as the title grows (via a CSS clamp() fed by a
--title-char-count custom property) toward a readable 0.875rem floor,
so short titles stay comfortable and long ones stay contained.
word-break: break-word remains the actual overflow backstop.

Closes #81
---
 src/ui/PodcastView/EpisodePlayer.svelte | 21 +++++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/ui/PodcastView/EpisodePlayer.svelte b/src/ui/PodcastView/EpisodePlayer.svelte
index 9c2a9bd..b7c4189 100644
--- a/src/ui/PodcastView/EpisodePlayer.svelte
+++ b/src/ui/PodcastView/EpisodePlayer.svelte
@@ -54,6 +54,9 @@
 	$: showQueue =
 		$plugin?.settings?.autoQueue !== false || $queue.episodes.length > 0;
 
+	// Title length feeds the CSS length-based downscaling on .podcast-title (issue #81).
+	$: titleCharCount = $currentEpisode?.title?.length ?? 0;
+
 	let isHoveringArtwork: boolean = false;
 	let isLoading: boolean = true;
 	let playerVolume: number = 1;
@@ -364,7 +367,7 @@
 		</button>
 	</div>
 
-	<h2 class="podcast-title">{$currentEpisode.title}</h2>
+	<h2 class="podcast-title" style="--title-char-count: {titleCharCount}">{$currentEpisode.title}</h2>
 
 	{#await srcPromise then src}
 		<audio
@@ -544,7 +547,21 @@
 	}
 
 	.podcast-title {
-		font-size: 1.125rem;
+		/*
+		 * Scale the title down as it gets longer (issue #81) so a long episode
+		 * title no longer renders at one large fixed size. Titles up to ~40
+		 * characters render at the 1rem base; beyond that the size eases down
+		 * (0.0025rem per extra character) toward a readable 0.875rem floor,
+		 * reached around ~90 characters. --title-char-count is an approximate
+		 * length signal (UTF-16 code units, set from the title in the markup), so
+		 * it only loosely tracks rendered width for non-Latin scripts;
+		 * word-break: break-word below is what actually keeps any title contained.
+		 */
+		font-size: clamp(
+			0.875rem,
+			calc(1rem - (var(--title-char-count, 0) - 40) * 0.0025rem),
+			1rem
+		);
 		font-weight: 600;
 		line-height: 1.4;
 		margin: 0 0 0.75rem;