Skip to content

fix(mobile): match feed CollectionTile cover size + title weight to TrackTile#14432

Open
raymondjacobson wants to merge 1 commit into
mainfrom
fix/mobile-collection-tile-feed-image-and-title-style
Open

fix(mobile): match feed CollectionTile cover size + title weight to TrackTile#14432
raymondjacobson wants to merge 1 commit into
mainfrom
fix/mobile-collection-tile-feed-image-and-title-style

Conversation

@raymondjacobson
Copy link
Copy Markdown
Member

Bug

Ray reported:

playlists render weirdly in mobile feeds. images are too big. we used to have a playlist tile that had the same sized image as the track tile. also the font is wrong it should match the same weight as the track tile too

Screenshot showed mobile Your Feed (For You / Latest) with a playlist ("Liquid Galaxy Album" by Zonii) where the cover art filled nearly the whole screen and the title font weight read lighter than the surrounding track-tile titles.

Root cause

#14428 (commit 17a4971337) replaced the feed CollectionTile's standard `LineupTileMetadata` header (the same one TrackTile uses) with an inline "card-style" header that rendered a full-width / `aspectRatio: 1` cover image above the metadata, and used `Text variant='title' strength='strong'` for the title.

Fix

Restore `LineupTileMetadata` for the feed CollectionTile header so cover art renders at `{ width: 72, height: 72 }` (from `lineup-tile/styles.ts` `image`) and the title renders as `Text weight='bold'` — both matching TrackTile exactly. The rest of the tile (label, stats, track list, action buttons) is unchanged.

Behavior before -> after:

  • Cover image: `width: 100%` + `aspectRatio: 1` (Collection-only style) -> `width: 72, height: 72` (shared `tileStyles.image` rule used by TrackTile via `LineupTileArt`).
  • Cover image source size requested: `SquareSizes.SIZE_480_BY_480` -> `SquareSizes.SIZE_150_BY_150` (right-sized for a 72px render; same as TrackTile).
  • Title `Text`: `variant='title' strength='strong'` -> rendered via `LineupTileMetadata` as `` (same call site TrackTile uses).

Shared-component note

`CollectionTile` is also used outside the mobile feed (chat-screen `ChatMessagePlaylist`, `CollectionLineupCarousel` on explore, `PlaylistsTab` / `AlbumsTab` on profile and library, `AddToCollectionDrawer`, `CollectionList`). They all rendered with the same `LineupTileMetadata` header for years prior to #14428 and will go back to that shape with this change. The pre-#14428 rendering is what those surfaces displayed historically; this PR restores the pre-existing baseline rather than introducing a new shape on them.

Suspected regression

#14428 / 17a4971337 (fix(mobile): rich CollectionTile in lineups (large artwork + track list + duration)).

Test plan

  • Lint: `cd packages/mobile && npm run lint` — could not run in this environment (worktree is missing transitive deps: `@react-native/typescript-config`, `sqlite3` fails to native-build under Python 3.13). Ran `npx eslint --fix` on the changed file; remaining reported errors are the same environment-level resolve errors that occur on the pre-change file.
  • Typecheck: `tsc --noEmit` — same environment limitation as above (`@react-native/typescript-config` not present).
  • No snapshot tests exist for `CollectionTile`.
  • No unit tests reference `CollectionTile`.
  • Did NOT verify in iOS / Android simulator — this environment cannot run them. Relied on code diff vs. the pre-fix(mobile): rich CollectionTile in lineups (large artwork + track list + duration) #14428 (working) version of the same file, which used the identical `LineupTileMetadata` call shape now restored.
  • Manual visual verification recommended: Feed (For You and Latest tabs) shows playlist tiles with 72x72 art + bold title matching adjacent track tiles, and non-feed surfaces (DM playlist, explore carousels, profile/library tabs) still render correctly.

🤖 Generated with Claude Code

…kTile

Render the feed's CollectionTile header via LineupTileMetadata, the same
component TrackTile uses, restoring the 72x72 cover art (down from
full-width / aspect-ratio 1) and the bold title text (down from the
title-variant strength=strong used by the card layout) so playlists no
longer dominate the feed surface.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@changeset-bot
Copy link
Copy Markdown

changeset-bot Bot commented Jun 2, 2026

⚠️ No Changeset found

Latest commit: 914a050

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

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.

1 participant