Self-hosted: side thumbnails on Journal entries - #1447
Conversation
Owner feedback from the first visual pass: entries should carry the post's image. A quiet side thumbnail rather than a hero, sized like marginalia beside the excerpt, resolved and proxied by render-helper exactly like the default card so no author-controlled URL reaches the src, lazy-loaded and hidden on the narrowest screens where it would crowd the measure-width column.
Code Review by Qodo
1.
|
|
Warning Review limit reached
Next review available in: 57 minutes You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (1)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
PR Summary by QodoSelf-hosted Journal: add side thumbnails to entry cards
AI Description
Diagram
High-Level Assessment
Files changed (1)
|
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 048614387f
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| src={imageUrl} | ||
| alt="" | ||
| loading="lazy" | ||
| className="hidden sm:block size-28 object-cover post-card-image-theme" |
There was a problem hiding this comment.
When the Journal theme renders this image, post-card-image-theme applies the unlayered rule in src/styles/components.css, whose height: var(--theme-post-card-image-height) overrides Tailwind's layered size-28 height. The Journal token sets that height to 200px, so the intended 112×112 marginal thumbnail actually renders 112×200; use only the radius token here or otherwise explicitly preserve the square height.
Useful? React with 👍 / 👎.
There was a problem hiding this comment.
Confirmed and fixed in 636ce2b. The img no longer uses post-card-image-theme, whose unlayered height token (200px under Journal) overrode the layered Tailwind size. The radius token is applied directly via rounded-[var(--theme-post-card-image-radius)] and size-28 now controls both dimensions.
| to="/$author/$permlink" | ||
| params={postParams} | ||
| search={postSearch} | ||
| className="shrink-0 mt-1" |
There was a problem hiding this comment.
sm
For image-bearing posts below the sm breakpoint, only the <img> is hidden while this Link remains a second flex item. Even though that item has zero width, the parent gap-5 still reserves a 20px gap, narrowing the text column on exactly the small screens where the thumbnail is meant not to crowd it; apply the responsive display classes to the link itself.
Useful? React with 👍 / 👎.
There was a problem hiding this comment.
Confirmed and fixed in 636ce2b. hidden sm:block moved from the img to the Link wrapper, so below sm the whole flex item is gone and the row's gap-5 no longer reserves space for it.
Code Review by Qodo
1.
|
![qodo-code-review[bot]](https://avatars.githubusercontent.com/in/484649?s=60&v=4){kind=small}
The shared post-card-image-theme class carries an unlayered height token (200px under Journal) that overrides the Tailwind size, stretching the square thumbnail; the radius token is applied directly instead. Hiding below sm moves to the Link wrapper so the zero-width flex item stops costing the row's gap on exactly the screens it was hidden for.
1 participant
Owner feedback from Journal's first visual pass: entries should show the post's image.
Adds a quiet side thumbnail beside the excerpt (marginalia, not a hero): resolved and proxied through render-helper exactly like the default card so no author-controlled URL ever reaches the src, lazy-loaded, radius from the theme token and hidden on the narrowest screens where it would crowd the 680px column. Entries without an image keep the pure text layout.
SPA suite 906 tests, typecheck green.