fix(frontend): keep Map Analysis popup inside the viewport (#806)

[srajang1805]

Fixes #806.

Summary

The CRE information popup on the Map Analysis page gets positioned outside the viewport when its trigger sits near the right edge of the screen, hiding most of the content.

What changed

application/frontend/src/pages/GapAnalysis/GapAnalysis.tsx:

• Enable Popper.js preventOverflow on the CRE info Popup so it shifts to stay within the viewport. (semantic-ui-react already enables flip, but preventOverflow is disabled by default.)
• Cap the popup width at min(550px, calc(100vw - 40px)) so it also fits on narrow viewports.

How to reproduce

1. Open Map Analysis with Base = CWE, Compare = ASVS.
2. Hover over a mapping entry on the right side of the table.
3. Before: the popup extends past the right edge of the screen. After: it stays fully visible.

Testing

• npx prettier@2 --check application/frontend/src/pages/GapAnalysis/GapAnalysis.tsx passes.
• yarn build (webpack production) compiles clean, only pre-existing bundle-size warnings.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yml

Review profile: CHILL

Plan: Team

Run ID: ea583bc5-050a-4ccf-a62d-f289ae50f3cf

📥 Commits

Reviewing files that changed from the base of the PR and between 8d8ddbc and c02ee90.

📒 Files selected for processing (1)

• application/frontend/src/pages/GapAnalysis/GapAnalysis.tsx

Included review availability: Your plan provides up to 2 included reviews per hour; 1 remains after this review.

---

Summary by CodeRabbit

• Bug Fixes
  • Improved gap-analysis document path popups by limiting their width on smaller screens and preventing them from overflowing the viewport.

Walkthrough

Changes

Gap analysis popup

Layer / File(s)	Summary
Popup viewport handling application/frontend/src/pages/GapAnalysis/GapAnalysis.tsx	The gap-analysis document path popup now uses a responsive maximum width and Popper preventOverflow with 8px padding.

Estimated code review effort: 1 (Trivial) | ~3 minutes

Merge Risk: ⚪ Minimal · up to 859a9

The Map Analysis popup now constrains its width and avoids viewport overflow, improving readability near screen edges. No merge-blocking risk remains.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	The changes satisfy issue #806 by enabling Popper.js preventOverflow and limiting the popup width so CRE information remains visible near the viewport edge.
Out of Scope Changes check	✅ Passed	The pull request changes one relevant frontend file and contains only the popup positioning and sizing updates required by issue #806.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 1…
Title check	✅ Passed	The title clearly and concisely describes the main change: keeping the Map Analysis popup inside the viewport.
Description check	✅ Passed	The description directly explains the viewport issue, the Popper.js and width changes, reproduction steps, and testing results.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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.}

[northdpole]

Simple correct fix for #806: enable Popper preventOverflow and cap popup width. LGTM.