Skip to content

feat(player): scale episode title font size to its length (#81) - #202

Merged
chhoumann merged 1 commit into
masterfrom
chhoumann/81-title-font-size
Jun 16, 2026
Merged

chhoumann merged 1 commit into
masterfrom
chhoumann/81-title-font-size

Conversation

@chhoumann

Copy link
Copy Markdown
Owner

Summary

The player rendered every episode title at a fixed 1.125rem, so long podcast titles dominated the player pane (issue #81). This reduces the base size to 1rem and eases the title size down as the title grows, toward a readable 0.875rem floor, so short titles stay comfortable and long ones stay contained.

How it works

The episode title length feeds a --title-char-count CSS custom property on the .podcast-title heading, and the font size is a clamp():

font-size: clamp(
  0.875rem,
  calc(1rem - (var(--title-char-count, 0) - 40) * 0.0025rem),
  1rem
);
  • Titles up to ~40 characters render at the 1rem base.
  • Beyond that, the size eases down 0.0025rem per extra character.
  • It bottoms out at a readable 0.875rem floor, reached around ~90 characters.

--title-char-count is an approximate length signal (UTF-16 code units), so it only loosely tracks rendered width for non-Latin scripts. The existing word-break: break-word remains the actual mechanism that keeps any title contained.

Verification

Runtime checked in a real Obsidian instance (isolated worktree vault) with the production bundle. Measured computed font-size on .podcast-title:

Title length Computed size
17 chars 16px (1rem base)
47 chars 15.72px (eased)
137 chars 14px (0.875rem floor)

The long title wrapped cleanly across lines, stayed centered, and did not overflow the pane.

Local gates (Node 22):

  • npm run lint pass
  • npm run format:check pass
  • npm run typecheck pass
  • npm run check:a11y pass (0 errors, 0 warnings)
  • npm run build pass
  • npm run test pass (486 tests)

(docs:build not run: no user-facing docs impact for a visual sizing change.)

Review

Reviewed with a multi-agent pass plus two adversarial reviewers on the opposing model. No correctness or accessibility blockers were found. Acted-on feedback: dropped the overstated "never overflow" wording in favor of an honest note that word-break is the containment backstop, removed a duplicate comment block, and kept the heading markup on a single line to match the rest of the file.

Closes #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
@cloudflare-workers-and-pages

Copy link
Copy Markdown

Deploying podnotes with  Cloudflare Pages  Cloudflare Pages

Latest commit: 48aa075
Status: ✅  Deploy successful!
Preview URL: https://826dceb8.podnotes.pages.dev
Branch Preview URL: https://chhoumann-81-title-font-size.podnotes.pages.dev

View logs

@chhoumann
chhoumann merged commit 659b6b8 into master Jun 16, 2026
2 checks passed
github-actions Bot pushed a commit that referenced this pull request Jun 22, 2026
# [2.17.0](2.16.0...2.17.0) (2026-06-22)

### Bug Fixes

* behavioral-audit logic and robustness fixes (back-end, 1/2) ([#213](#213)) ([4e2845d](4e2845d))
* **download:** default per-episode download path and migrate empty default ([#183](#183)) ([#186](#186)) ([46a6486](46a6486))
* **download:** prevent Android crash and create missing folders on download ([#178](#178)) ([ecd09d5](ecd09d5)), closes [#113](#113) [#86](#86) [#113](#113) [#86](#86)
* **lifecycle:** defer mobile podcast view startup ([#208](#208)) ([8bf9ce4](8bf9ce4))
* **notes:** cap note path length and harden folder creation ([#22](#22), [#87](#87)) ([#192](#192)) ([858e280](858e280)), closes [#87-class](#87)
* **playback:** persist listened time during playback ([#33](#33)) ([#190](#190)) ([e3433c2](e3433c2)), closes [#191](#191) [#108](#108) [#163](#163) [#183](#183)
* **playback:** play local files and downloads on iOS via resource path ([#100](#100)) ([#184](#184)) ([12c503a](12c503a))
* **player:** clear progress on episode switch to stop end-of-playback glitch ([#94](#94)) ([#194](#194)) ([59dccb3](59dccb3))
* **player:** reveal PodNotes view on Play with PodNotes so local files play ([#84](#84)) ([#198](#198)) ([5953625](5953625))
* **settings:** show labelled Add/Remove buttons in podcast search ([#109](#109)) ([#195](#195)) ([33399f5](33399f5))
* show downloaded episodes in the Local Files playlist ([#176](#176)) ([#177](#177)) ([184188c](184188c))
* **timestamps:** capture into the cursor's table cell without breaking the row ([#165](#165)) ([#203](#203)) ([964e342](964e342))
* **transcription:** always transcribe the currently playing episode ([#182](#182)) ([62b488a](62b488a)), closes [#107](#107)
* **uri:** preserve '+' in episode titles and paths for timestamp links ([#181](#181)) ([8ad7aa5](8ad7aa5)), closes [#164](#164)
* **view:** reliably reveal PodNotes view via command + ribbon icon ([#55](#55)) ([#199](#199)) ([fa1d708](fa1d708))

### Features

* add podcast segment links ([#205](#205)) ([d97e59e](d97e59e))
* **api:** expose generated episode transcripts ([e264465](e264465)), closes [#105](#105)
* behavioral-audit UI and interaction fixes (front-end, 2/2) ([#215](#215)) ([894d93d](894d93d))
* **commands:** add playback rate and media timestamp controls ([#206](#206)) ([a8bb44a](a8bb44a))
* **devx:** isolated per-worktree Obsidian E2E vault wrapper ([#188](#188)) ([a8b7a4a](a8b7a4a))
* **episodes:** add a setting to control the Latest Episodes list length ([#114](#114)) ([#200](#200)) ([7b3e3c6](7b3e3c6))
* **notes:** add {{episodelink}} template tag to resume an episode from its note ([#35](#35)) ([#193](#193)) ([8c1ddd6](8c1ddd6))
* **notes:** add podcast feed-level notes ([#163](#163)) ([#187](#187)) ([db0de47](db0de47)), closes [#161](#161) [#160](#160)
* **notes:** ship a Bases-friendly default episode note template ([#160](#160)) ([#201](#201)) ([209431d](209431d)), closes [#163](#163) [#183](#183)
* **player:** scale episode title font size to its length ([#81](#81)) ([#202](#202)) ([659b6b8](659b6b8))
* **player:** support video episode playback ([#209](#209)) ([f92a91f](f92a91f))
* **queue:** add setting to disable queue auto-population and auto-advance ([#108](#108)) ([#185](#185)) ([cf3d73c](cf3d73c))
* **queue:** allow reordering the playback queue ([#80](#80)) ([#179](#179)) ([d994d61](d994d61)), closes [#173](#173)
* **settings:** import/export settings & templates ([#180](#180)) ([a27d23d](a27d23d)), closes [#162](#162) [#162](#162)
* **templates:** add {{currentDate}}, {{episodeNumber}}, {{duration}} template variables ([#189](#189)) ([ec573eb](ec573eb)), closes [#75](#75) [#34](#34) [#88](#88) [163/#186](#186)
* **templates:** add episode chapters tag ([#207](#207)) ([9c98863](9c98863))
* **transcripts:** opt-in speaker diarization for transcripts ([#168](#168)) ([#204](#204)) ([a96e12f](a96e12f))
@github-actions

Copy link
Copy Markdown
Contributor

🎉 This PR is included in version 2.17.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

@chhoumann
chhoumann deleted the chhoumann/81-title-font-size branch June 29, 2026 05:59
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

reduce font size of the title when playing?

1 participant