[chhoumann]

Summary

Fixes #506

On a phone, a podcast's page could show its cover far from the left edge, with the title and author pushed against the right edge. In the header, the text block took only its own width, so the row had free space left over. A theme or snippet that gives images auto side margins (img { margin-inline: auto }, a common way to center images) put the cover in the middle of that space. Every other cover row in the view already lets its text take the rest of the row.

• The header's text block now takes the rest of the row (flex: 1). No free space is left, so auto margins on the cover come to 0, even when they are !important.
• In a mobile drawer, the view's page color is now the drawer's own --mobile-sidebar-background. Before, the sticky search row and the full player used --background-primary, so on a phone in dark mode they were black on the drawer's #1e1e1e. With Minimal they were a lighter band, as in the owner's screenshot.

Obsidian's and PodNotes' own CSS do not reproduce the header bug. Chromium phone emulation and WebKit 26.4 (rendering the live markup and CSS) both lay out the header correctly, and so does Minimal 9.1.4 in Chromium with all 261 of its body-class toggles on. The owner's drawer and band colors match Minimal exactly (#212121 and #262626), and Minimal plus any image-centering rule reproduces the owner's layout to the pixel. I could not see which rule on the owner's phone centers images, so the fix does not depend on which one it is.

Left out: in a dark drawer the mini player has the drawer's color and stands apart only by its top border. This was already so on master.

The row menu icon is horizontal in the "before" shots and vertical in the "after" shots. Obsidian chose its "more" icon differently in the two sessions, and its own view-header button changed the same way. This PR does not change it.

Verification

Obsidian 1.14.4 on Linux (Xvfb), isolated worktree vault, phone emulation (390 x 844, body.is-phone), view in the right drawer (328 px). Node 22.23.2.

• New e2e on a phone, a podcast's header keeps its cover at the left under a theme that centers images, ... in tests/e2e/view-polish.test.ts. It adds img { margin-inline: auto !important } and checks the header and the search row in the right drawer and the main area, dark and light. Red on master: the cover sits 60 px in (91 px in the main area), and the dark drawer's search row is rgb(0, 0, 0) on rgb(30, 30, 30). Green with the fix.
• npm run test:e2e on a fresh vault with view-polish, journey-feeds, journey-links-local and journey-shell: 4 files, 34 tests passed at 26eba28. The later commits change only the new test and a comment, and the new test passes again.
• Main-area phone screenshots of Library, Add podcast results, the podcast page, the mini player and the full player, dark and light, taken in one session for master and this branch: identical apart from at most 5 antialiased pixels away from the header.
• npm run lint, format:check, typecheck, build, test (2788 passed), docs:build: all pass. npm run size: 101,611 gzip bytes (master 101,597, +14; budget 103,000).

Mutations. Each one is a plausible wrong fix, and each fails the new e2e:

Mutation	Result
Master CSS	cover at 60 px (drawer), 91 px (main area); black band in the dark drawer
margin: 0 on the cover instead of flex: 1 on the text	cover at 91 px
flex: 1 on the title instead of the text block	cover at 91 px
justify-content: flex-start on the header	cover at 91 px
Drawer band from --background-secondary	light drawer band rgb(246, 246, 246) on white
Band rule on .is-mobile instead of the drawer	dark main-area band rgb(30, 30, 30) on black
Band fix only	cover at 91 px
Header fix only	black band in the dark drawer

Release impact

None. CSS only, with no settings, storage, API or URI change.

Docs at release

None.

---

Note

Low Risk
CSS-only layout and theme-token tweaks with no API or data changes; risk is limited to podcast page header and mobile drawer styling.

Overview
Fixes phone podcast page layout when themes center images (#506) by giving the hero text block flex: 1, so the row has no spare width for margin-inline: auto on the cover to shift it away from the left.

In a mobile workspace drawer, --pn-bg now uses --mobile-sidebar-background instead of the main-area primary background, so the sticky episode search row (and related surfaces) match the drawer in dark and light mode.

Adds an e2e test that injects centered-image CSS on phone and asserts cover/title spacing plus filter-row vs page background colors in the right drawer and main area.

^{Reviewed by Cursor Bugbot for commit 683e49f. Bugbot is set up for automated code reviews on this repo. Configure here.}

Note

Fix podcast header cover alignment and background on phones

• Adds flex growth to the episode text container in EpisodesPage.svelte so it fills the remaining row width. This keeps the cover artwork pinned to the left edge when a theme centers images with automatic margins.
• Podcast views rendered inside the workspace drawer now use the mobile sidebar background color instead of the default podcast surface (see PodcastView.svelte).
• Adds a short podcast fixture and an end-to-end test in view-polish.test.ts that checks artwork position, title spacing, and filter/page color match on phones in both the drawer and main area, under dark and light themes.

^{Macroscope summarized 683e49f.}

[cloudflare-workers-and-pages]

Deploying podnotes with    Cloudflare Pages

Latest commit:	683e49f
Status:	✅  Deploy successful!
Preview URL:	https://eb6e45e2.podnotes.pages.dev
Branch Preview URL:	https://fix-phone-podcast-header.podnotes.pages.dev

View logs