Hive
refactor(forage): split detail metadata and body cards
GitHub issue · Closed
What changed
This separates the forage item detail page into two sibling cards:
- The first card is now
Metadata, with source, requester, updated date, and domain badges. - The rendered item body now lives in its own
Detailscard below the metadata. - The edit state keeps the form in the first card and labels it
Edit item, so the page does not show a second body card while the item is being edited. - A component render test now asserts that metadata and body content stay in separate cards.
Why
The previous layout put metadata and the rendered issue body inside one Details card. On long GitHub issue bodies, that made the top card do two jobs and weakened the page hierarchy. Keeping metadata and body content in separate cards makes the detail page easier to scan, especially for seeded GitHub issue data with Markdown content.
Approach
The change stays inside the shared forage component so manual forage items, GitHub issues, and Grafana alerts all use the same structure. Route-specific styles now target the new metadata-card-section and body-card-section parts alongside the comments card section.
Impact
This is a presentation-only change. There are no database, route, feed, or operator-facing configuration changes.
Validation
mix format lib/hive_web/components/forage_components.ex assets/css/routes/forage.css test/hive_web/components/forage_components_test.exsmix test test/hive_web/components/forage_components_test.exs test/hive_web/live/forage_live/feature_requests_test.exs test/hive_web/live/forage_live/github_issues_test.exspassed with 23 tests.mix ecto.setupseeded local forage data for visual verification.- Verified the seeded GitHub issue detail page with a headless Chrome browser at desktop and mobile viewport sizes.
Verification screenshots
Desktop:
Mobile:
No GitHub comments yet.