Skip to content

fix(ui): properly scale placeholder artwork text with smaller sizes#531

Merged
balazs-szucs merged 2 commits into
grimmory-tools:developfrom
alexhb1:small-placeholder
Apr 15, 2026
Merged

fix(ui): properly scale placeholder artwork text with smaller sizes#531
balazs-szucs merged 2 commits into
grimmory-tools:developfrom
alexhb1:small-placeholder

Conversation

@alexhb1

@alexhb1 alexhb1 commented Apr 15, 2026

Copy link
Copy Markdown
Member

Description

Forgot to PR this weeks ago! 😅

This fixes an issue with placeholder generated covers in thumbnail environments (e.g. the search results) where placeholder text would overflow beyond the edges of the artwork and generally look bad. Text now scales correctly with the size of the artwork.

Linked Issue: Fixes #

Changes

  • Placeholder text now scales proportionally to the artwork size, even on small surface areas
  • Long titles/author names are clipped and word-wrapped to stay within the cover shape

Summary by CodeRabbit

  • Bug Fixes
    • Enhanced responsive layout handling in the cover generator with improved text overflow prevention and better content wrapping across different screen sizes
    • Refined dynamic padding and typography scaling to adjust intelligently based on container size, maintaining consistent visual appearance across all dimensions

@coderabbitai

coderabbitai Bot commented Apr 15, 2026

Copy link
Copy Markdown
Contributor

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: a6309894-8915-44ab-82f5-e885aa274b28

📥 Commits

Reviewing files that changed from the base of the PR and between 41ccd64 and c34c465.

📒 Files selected for processing (1)
  • frontend/src/app/shared/components/cover-generator/cover-generator.component.ts
📜 Recent review details
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (6)
  • GitHub Check: Frontend Lint Threshold Check
  • GitHub Check: Analyze (actions)
  • GitHub Check: Analyze (java-kotlin)
  • GitHub Check: Analyze (javascript-typescript)
  • GitHub Check: Test Suite / Frontend Tests
  • GitHub Check: Test Suite / Backend Tests
🧰 Additional context used
📓 Path-based instructions (3)
frontend/src/**/*.{ts,tsx,html,scss}

📄 CodeRabbit inference engine (AGENTS.md)

Use 2-space indentation in TypeScript, HTML, and SCSS files

Files:

  • frontend/src/app/shared/components/cover-generator/cover-generator.component.ts
frontend/src/app/**/*.component.ts

📄 CodeRabbit inference engine (AGENTS.md)

Keep Angular code on standalone components. Do not add NgModules

Files:

  • frontend/src/app/shared/components/cover-generator/cover-generator.component.ts
frontend/src/app/**/*.{ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

frontend/src/app/**/*.{ts,tsx}: Prefer inject() over constructor injection
Follow frontend/eslint.config.js: component selectors use app-*, directive selectors use app*, and any is disallowed

Files:

  • frontend/src/app/shared/components/cover-generator/cover-generator.component.ts
🧠 Learnings (3)
📚 Learning: 2026-04-05T21:16:01.715Z
Learnt from: balazs-szucs
Repo: grimmory-tools/grimmory PR: 385
File: frontend/src/app/app.component.ts:55-56
Timestamp: 2026-04-05T21:16:01.715Z
Learning: When reviewing code in the Grimmory frontend (Angular), prefer modern Angular patterns. Specifically: (1) Prefer `DestroyRef` with `takeUntilDestroyed(destroyRef)` for teardown in Angular v16+ instead of manually tracking `Subscription` arrays and calling `unsubscribe()` in `ngOnDestroy()`. (2) Prefer `inject()` for dependency injection over constructor injection where appropriate. (3) Prefer Angular signals (e.g., `signal`, `computed`) over `BehaviorSubject`/`Observable` for state where signals/computed values fit the use case. Flag older patterns when they can be replaced with these modern equivalents without changing behavior.

Applied to files:

  • frontend/src/app/shared/components/cover-generator/cover-generator.component.ts
📚 Learning: 2026-04-07T09:28:09.587Z
Learnt from: balazs-szucs
Repo: grimmory-tools/grimmory PR: 393
File: frontend/src/app/features/readers/pdf-reader/pdf-reader.component.ts:255-263
Timestamp: 2026-04-07T09:28:09.587Z
Learning: In this Angular frontend (under frontend/src/app/), flag manual resource management/cleanup patterns when there is an Angular v16+ automatic alternative. Examples to prefer: (1) Instead of manually pairing document/window event listeners with stored cleanup functions (e.g., add/removeEventListener with mouseMoveCleanup/documentClickCleanup/keydownCleanup/touchCleanup fields), register teardown via DestroyRef.onDestroy(cleanupFn) (or equivalent Angular v16+ teardown mechanism). (2) Instead of storing Subscriptions in fields and explicitly unsubscribing in ngOnDestroy (e.g., annotationSaveSubscription/annotationCacheSubscription), use takeUntilDestroyed(destroyRef) (piped into the observable) or other Angular v16+ primitives. (3) If teardown is lifecycle-coupled and can be automated via DestroyRef/takeUntilDestroyed/signals (or other Angular v16+ mechanisms), prefer the automated approach over manual ngOnDestroy cleanup. Raise a review finding for the manual pattern and recommend the aut...

Applied to files:

  • frontend/src/app/shared/components/cover-generator/cover-generator.component.ts
📚 Learning: 2026-04-11T03:55:57.229Z
Learnt from: zachyale
Repo: grimmory-tools/grimmory PR: 439
File: frontend/src/app/features/series-browser/components/series-browser/series-browser.component.ts:178-196
Timestamp: 2026-04-11T03:55:57.229Z
Learning: In this Angular frontend (frontend/src/app/), prefer the team’s reactive i18n “signal/computed” pattern: (1) For individual reactive translated strings, use `translateSignal()` from `jsverse/transloco`. (2) For option/label arrays that must update on language switch, create a single `activeLang` signal with `toSignal(t.langChanges$, { initialValue: t.getActiveLang() })`, then derive the arrays as `computed()` signals that read `activeLang()`. This should avoid manual `langChanges$` subscriptions and any `ngOnDestroy` subscription cleanup; prefer this over subscribing in `ngOnInit` when implementing reactive localization.

Applied to files:

  • frontend/src/app/shared/components/cover-generator/cover-generator.component.ts
🔇 Additional comments (4)
frontend/src/app/shared/components/cover-generator/cover-generator.component.ts (4)

44-44: Good use of container query sizing context.

container-type: inline-size is the right foundation for the cqi-based responsive typography/padding updates below.


56-61: Overflow clipping + responsive padding look correct.

This combination prevents bleed outside rounded covers while keeping spacing proportional at small sizes.


71-73: Text overflow handling is solid for long titles/authors.

word-break: break-word with max-width: 100% and existing line clamping addresses the thumbnail overflow case well.

Also applies to: 97-99


76-87: Per-size responsive font caps are well tuned.

Using min(px, cqi) keeps readability on larger covers while safely scaling down in constrained thumbnails.

Also applies to: 101-103


📝 Walkthrough

Walkthrough

The cover-generator component's CSS was updated to improve responsive sizing using container queries. Container-type support was added to enable flexible padding and font sizes based on the component's inline size, with overflow clipping and word-break handling for text elements.

Changes

Cohort / File(s) Summary
Cover Generator Responsive Styling
frontend/src/app/shared/components/cover-generator/cover-generator.component.ts
Added container-type: inline-size for container-query support. Replaced fixed padding with min(..., ...cqi)-based values. Updated title and author typography with container-query-relative font sizes. Added word-break: break-word and max-width: 100% to prevent text overflow.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~5 minutes

Possibly related PRs

  • grimmory#320: Modifies the same cover-generator placeholder styles with border-radius inheritance changes, complementing the responsive sizing improvements in this PR.

Suggested labels

frontend, chore

Suggested reviewers

  • imajes
  • balazs-szucs

Poem

A rabbit hops through queries so fine, 🐰
Container units help layouts align,
With cqi magic and padding so tight,
Typography scales with responsive delight,
No overflow troubles, the text flows just right! ✨

🚥 Pre-merge checks | ✅ 3
✅ Passed checks (3 passed)
Check name Status Explanation
Title check ✅ Passed The title follows conventional commit format with 'fix' type and descriptive scope/message about placeholder text scaling.
Description check ✅ Passed The description covers required sections (Description, Linked Issue, Changes) with clear explanations of the fix and its impact.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
✨ Simplify code
  • Create PR with simplified code

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.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@balazs-szucs balazs-szucs left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you :)

@balazs-szucs balazs-szucs merged commit 33d0ca8 into grimmory-tools:develop Apr 15, 2026
15 checks passed
zachyale pushed a commit to zachyale/grimmory that referenced this pull request Apr 17, 2026
…rimmory-tools#531)

* chore(ui): scale down placeholder text sizes

* chore(ui): switch to inline-size
zachyale pushed a commit to zachyale/grimmory that referenced this pull request Apr 17, 2026
…rimmory-tools#531)

* chore(ui): scale down placeholder text sizes

* chore(ui): switch to inline-size
zachyale pushed a commit that referenced this pull request Apr 17, 2026
…531)

* chore(ui): scale down placeholder text sizes

* chore(ui): switch to inline-size
zachyale pushed a commit that referenced this pull request Apr 22, 2026
…531)

* chore(ui): scale down placeholder text sizes

* chore(ui): switch to inline-size
dsmouse pushed a commit to dsmouse/grimmory that referenced this pull request May 11, 2026
…rimmory-tools#531)

* chore(ui): scale down placeholder text sizes

* chore(ui): switch to inline-size
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants