Fix: Add rounded corners to map component for UI consistency#4314
Fix: Add rounded corners to map component for UI consistency#4314Saurabh-2607 wants to merge 2 commits intoOWASP:mainfrom
Conversation
Summary by CodeRabbit
WalkthroughUpdated ChapterMap markup and global CSS: the map root section receives expanded Tailwind classes and MapContainer inline style is adjusted; global stylesheet adds dark-mode Leaflet container background and forces Leaflet containers to be transparent. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related PRs
Suggested reviewers
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
📝 Coding Plan
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. Comment |
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
There was a problem hiding this comment.
No issues found across 1 file
Confidence score: 5/5
- Automated review surfaced no issues in the provided summaries.
- No files require special attention.
Since this is your first cubic review, here's how it works:
- cubic automatically reviews your code and comments on bugs and improvements
- Teach cubic by replying to its comments. cubic learns from your replies and gets better over time
- Add one-off context when rerunning by tagging
@cubic-dev-aiwith guidance or docs links (includingllms.txt) - Ask questions if you need clarification on any suggestion
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
kasya
left a comment
kasya
left a comment
There was a problem hiding this comment.
@Saurabh-2607 thanks for working on this! Left a comment bellow ⬇️
| <section | ||
| aria-label="Chapter Map" | ||
| className="relative" | ||
| className="relative overflow-hidden rounded-lg" |
There was a problem hiding this comment.
I think I remembered now why we removed the rounded corners at some point.
With rounded corners there's this lighter "border" that gets pretty noticeable in corners.
Do you think we could get rid of this and still keep rounded corners?
- Set MapContainer background to transparent in ChapterMap.tsx - Add global CSS override for .leaflet-container to be transparent - Resolves issue where white background was visible at rounded corners
Saurabh-2607
dismissed stale reviews from coderabbitai[bot] and cubic-dev-ai[bot]
via
408b61d
|
@kasya Resolved the Issue about the a border on the edges |
|
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
frontend/src/app/globals.css (1)
472-474: Scope the transparent Leaflet override to the ChapterMap container.Currently only one MapContainer exists in the application (in
ChapterMap.tsx), so this global selector doesn't cause cross-page regressions today. However, scope this to the ChapterMap wrapper class to prevent unintended styling if additional Leaflet maps are added. Also consider scoping the dark mode variant on line 320 (.dark .leaflet-container).🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frontend/src/app/globals.css` around lines 472 - 474, The global rule targeting .leaflet-container should be scoped to the ChapterMap wrapper used in ChapterMap.tsx to avoid affecting other Leaflet maps; update the selector to target the wrapper class used by ChapterMap (e.g., .chapter-map .leaflet-container) instead of the global .leaflet-container, and likewise update the dark-mode rule (.dark .leaflet-container) to (.dark .chapter-map .leaflet-container) so both regular and dark-mode overrides are confined to the ChapterMap component.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@frontend/src/app/globals.css`:
- Around line 320-322: The dark-mode background declared for .dark
.leaflet-container is being overridden by a later rule that sets background:
transparent !important; find the conflicting selector (the rule that uses
background: transparent !important on .leaflet-container) and either
remove/relax that transparent override or make the dark rule win by
consolidating them into a single rule (e.g., apply the dark background on
.leaflet-container when .dark is present and include the same
specificity/!important treatment the transparent rule uses); update the existing
.dark .leaflet-container declaration or the transparent rule so only one clear
behavior remains.
---
Nitpick comments:
In `@frontend/src/app/globals.css`:
- Around line 472-474: The global rule targeting .leaflet-container should be
scoped to the ChapterMap wrapper used in ChapterMap.tsx to avoid affecting other
Leaflet maps; update the selector to target the wrapper class used by ChapterMap
(e.g., .chapter-map .leaflet-container) instead of the global
.leaflet-container, and likewise update the dark-mode rule (.dark
.leaflet-container) to (.dark .chapter-map .leaflet-container) so both regular
and dark-mode overrides are confined to the ChapterMap component.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: e0965c35-5f4e-40ff-8744-48dd04722ce3
📒 Files selected for processing (2)
frontend/src/app/globals.cssfrontend/src/components/ChapterMap.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
- frontend/src/components/ChapterMap.tsx
2 participants
Proposed change
Resolves #4311
The map component currently does not have rounded corners, while most other UI elements in the interface use rounded borders. This creates a small visual inconsistency in the design.
This PR adds the same
border-radiusused across other UI components to the map container so that it aligns with the overall design system.Changes made
rounded-lgto the map container.Result
Before
After
Screenshots
Checklist
make check-testlocally: all warnings addressed, tests passed