[andcachia]

Issue:

On laptop sized screens, the height of the announcement modal is exceeding the height of the viewport. This renders the user unable to click the button to proceed.

Resolution:

The modal height is restricted to 85vh, with the body content scrollable whilst both buttons remain fixed to the bottom of the modal, viewable at all time.

NOTES:

1. As minimal changes as possible were done.
2. Original issue produced on browser viewport size 1280 x 559
3. The modal seems to be centered within the main body of the app, not including the bottom nav bar, even though the bottom navbar is also hidden by the modal background. The user can also switch between bottom navbar tabs. I assume this was a design choice and therefore left as is.
4. The -1rem margin is to offset the -1rem Margin Top parameter in the PrettyIcon class, as was leaving a gap between the icon image and topmost div border.

Summary by CodeRabbit

• Bug Fixes
  • Announcement modal now constrains long content in a scrollable area so messages no longer overflow the viewport.
  • Action buttons are fixed below the scrollable content for consistent access.
  • Icon, tag, message and list spacing preserved and adjusted so elements render correctly within the modal.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between bf46267 and c645d49.

📒 Files selected for processing (1)

• src/components/Announcement.tsx

---

Walkthrough

Reworks the Announcement modal layout: introduces an outer flex column with max-height, an inner scrollable content region (overflowY: auto) with a negative top offset to align PrettyIcon, and moves the action buttons outside the inner scroll area but inside the outer container.

Changes

Cohort / File(s)	Summary
Modal Layout Restructuring src/components/Announcement.tsx	Replaces the single FlexCol with an outer max-height flex column and an inner overflowY:auto scrollable wrapper for existing content. Adds a negative top offset to counter PrettyIcon margin. Moves action buttons out of the inner scrolling region into a separate container after the scrollable content. No public API changes.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'Fix for issue #307 - Announcement modal height restriction' directly summarizes the main change: restricting the announcement modal height to fix the viewport overflow issue.

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

✨ Finishing Touches

• 📝 Generate docstrings (stacked PR)
• 📝 Generate docstrings (commit on current branch)

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

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 and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/components/Announcement.tsx`:
- Around line 118-121: The container div in Announcement.tsx currently uses a
global negative margin ("margin: '-1rem'") to offset PrettyIcon's top negative
margin, which affects all sides; update the inline style on that div to apply
the negative offset only to the top (e.g., replace the blanket margin with a
top-only margin property such as marginTop: '-1rem' while preserving padding and
other style properties) so horizontal overflow/edge clipping is avoided and the
intent in the comment (offset PrettyIcon's top margin) is honored.

---

ℹ️ Review info

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between b7bca4c and 741a587.

📒 Files selected for processing (1)

• src/components/Announcement.tsx

[bordalix]

Suggested change

	style={{ overflowY: 'auto', flex: '1 1 auto', minHeight: 0, margin: '-1rem', padding: '1rem 1rem 0 1rem' }}
	style={{ overflowY: 'auto', flex: '1 1 auto', minHeight: 0, marginTop: '-1rem', padding: '1rem 1rem 0 1rem' }}

[bordalix]

Suggested change

	<FlexCol gap='0.25rem' style={{ flex: '0 0 auto' }}>
	<FlexCol gap='0.25rem'>

FlexCol has no style attribute

[tiero]

also please solve conflicts @andcachia

[andcachia]

@bordalix @tiero requested changes performed accordingly and conflict resolved