feat(propdates): collapse long milestone reports with a Read-more toggle

[sktbrd]

Description

The propdates feed rendered every update at full height, so a couple of long milestone reports buried everything below them. This clamps long propdate messages to a collapsed height with a soft fade and a "Read full update →" / "Show less" toggle — the feed stays scannable, and short updates render unchanged.

Mirrors the existing About-page DaoDescription "Read More" pattern (same measure-then-clamp approach, ResizeObserver, aria-expanded/aria-controls) so the interaction feels native. The fade gradient is tuned to the card message's background2 token.

Before / after

Collapsed feed — long milestone propdates now fit on one screen, each with a fade + toggle:

Expanded in place ("Show less" to recollapse):

Implementation

• PropDateCard.tsx — measure the rendered message via ResizeObserver; only clamp + show the toggle when it overflows the collapsed height (240px). Defaults collapsed; resets when the message changes.
• PropDateCard.css.ts (new) — collapsed-height constant + fade-out gradient tuned to background2.

Notes

• Presentational / DOM-driven (uses scrollHeight), so no unit test — jsdom performs no layout, which would make such a test hollow. Verified on a live preview deploy (screenshots above).
• No new dependencies. type-check and lint are clean for packages/proposal-ui.

Bonus contribution from the Gnars team, alongside Prop 61 Milestone 3.

Summary by CodeRabbit

• New Features
  • Long proposal-date updates now collapse with a visual fade for easier scanning.
  • Added “Read full update” and “Show less” controls for expanding and collapsing lengthy messages.
  • Collapsed content adapts when the window is resized or the message changes.

[vercel]

@sktbrd is attempting to deploy a commit to the Nouns Builder Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 611ea5f3-467e-4e9d-87a1-1fe02417b5ba

📥 Commits

Reviewing files that changed from the base of the PR and between ff9820c and fd5ce7b.

📒 Files selected for processing (2)

• packages/proposal-ui/src/components/PropDates/PropDateCard.css.ts
• packages/proposal-ui/src/components/PropDates/PropDateCard.tsx

---

📝 Walkthrough

Walkthrough

PropDate cards now detect overflowing messages, clamp them to a fixed height, apply a fade overlay, and provide an accessible control to expand or collapse the message. Overflow is recalculated after content and size changes.

Changes

PropDate message expansion

Layer / File(s)	Summary
Collapsed message styling packages/proposal-ui/src/components/PropDates/PropDateCard.css.ts	Defines the 240px collapsed height and a non-interactive bottom gradient using the card background token.
Overflow detection and expansion packages/proposal-ui/src/components/PropDates/PropDateCard.tsx	Measures message overflow, observes resize changes, resets expansion when the message changes, and renders an accessible “Read full update”/“Show less” toggle.

Estimated code review effort: 2 (Simple) | ~10 minutes

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly summarizes the main change: collapsing long propdate reports with a read-more toggle.
Description check	✅ Passed	The description clearly covers the change, motivation, implementation, review notes, and validation, although template checkboxes are omitted.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches 💡 1

🛠️ Fix failing CI checks 💡

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

packages/proposal-ui/src/components/PropDates/PropDateCard.css.ts

ESLint skipped: missing config or dependency (missing-dependency). The ESLint configuration references a package that is not available in the sandbox.

packages/proposal-ui/src/components/PropDates/PropDateCard.tsx

ESLint skipped: the ESLint configuration for this file references a package that is not available in the sandbox.

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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