feat: improve readability of metadata on detail page

[niklhut]

Summary by CodeRabbit

• Style
  • Reorganized metadata layout on the library book detail page for improved clarity and readability.
  • Separated ISBN and "Added" date information into distinct sections.
  • Updated the "Added" date label formatting for consistency.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Warning

Rate limit exceeded

@niklhut has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 11 minutes and 14 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

📥 Commits

Reviewing files that changed from the base of the PR and between 965c22b and 95b9ad2.

📒 Files selected for processing (1)

• app/pages/library/[id].vue

📝 Walkthrough

Walkthrough

The library detail page's metadata section is restructured by wrapping compact metadata in a new container and splitting the ISBN and "Added At" fields into separate display blocks with adjusted labeling.

Changes

Cohort / File(s)	Summary
Library Page Metadata Reorganization app/pages/library/[id].vue	Wrapped compact metadata items in a new flex container. Split combined ISBN and Added At block into two separate divs. Updated "Added At" label formatting from "Added {{ formattedAddedAt }}" to "Added: {{ formattedAddedAt }}". All conditional rendering logic preserved.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

🐰 Metadata's dance, so neat and tidy,
Split and wrapped in rows on Friday,
ISBN stands proud, all on its own,
Added dates in their cozy home,
Structure shines, the layout's true! 🌟

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly describes the main change: reorganizing and improving the visual layout of metadata on the detail page for better readability.
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.}

---

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

[coderabbitai]

Actionable comments posted: 2

🤖 Fix all issues with AI agents

In `@app/pages/library/`[id].vue:
- Line 154: Remove the redundant "md:flex-1" utility from the nested metadata
wrapper div (the element with class "space-y-2 md:flex-1") since its parent
already has "md:flex-1"; update the class to just "space-y-2" to avoid
duplicated layout styling.
- Around line 176-188: The outer divs for the ISBN and Added At blocks render
even when empty; move the v-if from the inner span to the corresponding parent
divs so the entire block is removed when falsy (use v-if="book.isbn" on the ISBN
div and v-if="formattedAddedAt" on the Added At div), keeping the inner spans as
plain content to avoid empty containers and unwanted spacing.

📜 Review details

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 5bfdf22 and 965c22b.

📒 Files selected for processing (1)

• app/pages/library/[id].vue

🔇 Additional comments (1)

app/pages/library/[id].vue (1)

153-174: LGTM on metadata restructuring!

The compact metadata section correctly handles conditional separator rendering with proper logic for displaying bullets between items. The restructuring improves readability by grouping related information.

_{✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.}