Fix "Show on Map" link oversized clickable area (fixes #16536)

[Jayant-Sharma-Dev]

Summary

Fixes an issue where the "Show on Map" link in facility cards had a clickable area larger than its visible text/icon, causing accidental navigation when clicking nearby empty space.

Fixes #16536

Problem

The link used flex, which stretched it to fill the full width of its parent container — making the empty space beside the text clickable too.

Solution

Added w-fit to constrain the link to its actual content width, while keeping flex so the layout (position below the address, icon alignment) stays unchanged.

Before:

Recording.2026-07-11.015136.mp4

After:

Recording.2026-07-18.011503.mp4

Testing

• Clicked directly on "Show on Map" text/icon — opens map as expected.
• Clicked empty space beside it — no longer triggers navigation.
• Verified layout unchanged (link still sits below the address, matching existing card design).

Merge Checklist

• Tested locally in browser
• Added/updated tests for changed code
• Added/updated documentation
• All CI checks pass

Summary by CodeRabbit

• Style
  • Updated the facility map link styling to better fit its content by adjusting its rendered width behavior.
  • Preserved existing link behavior, layout, and hover styling.

[Copilot]

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

[github-actions]

⚠️ Merge Checklist Incomplete

Thank you for your contribution! To help us review your PR efficiently, please complete the merge checklist in your PR description.

Your PR will be reviewed once you have marked the appropriate checklist items.

To update the checklist:

• Change - [ ] to - [x] for completed items
• Only check items that are relevant to your PR
• Leave items unchecked if they don't apply

The checklist helps ensure code quality, testing coverage, and documentation are properly addressed.

[coderabbitai]

Walkthrough

Changes

Facility map link

Layer / File(s)	Summary
Constrain map link width src/components/Facility/FacilityMapLink.tsx	Adds the w-fit class to size the map link to its content while retaining its existing styling.

Possibly related PRs

• ohcnetwork/care_fe#16545: Modifies the same component by adding the w-fit class to the rendered link.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	The change directly addresses #16536 by constraining the link click area to the visible content.
Out of Scope Changes check	✅ Passed	The PR appears scoped to the single UI fix in FacilityMapLink.tsx with no unrelated changes.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Title check	✅ Passed	The title clearly matches the main change: fixing the oversized clickable area of the Show on Map link.
Description check	✅ Passed	The description covers the required fix summary, issue reference, implementation details, testing, and checklist structure, with only minor template omissions.

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

[greptile-apps]

Greptile Summary

This PR fixes an oversized clickable area on the "Show on Map" facility card link by adding the w-fit Tailwind utility class, constraining the element width to its content rather than stretching full-width.

• Adds w-fit to the Link className in FacilityMapLink.tsx — a minimal, targeted fix that preserves all existing layout (flex, items-center, gap-1) and hover styling.

Confidence Score: 5/5

Safe to merge — the change is a single Tailwind class addition that narrows the link's clickable area without touching any logic.

A one-class addition with no logic or behavior changes beyond fixing the documented UX bug. The fix is correct: w-fit applies width: fit-content, which constrains the element to its natural content width while leaving flex layout intact for icon alignment.

No files require special attention.

Important Files Changed

Filename	Overview
src/components/Facility/FacilityMapLink.tsx	Adds w-fit to the Link's class list to constrain the clickable area to the content width, fixing accidental navigation when clicking empty space beside the "Show on Map" text.

_{Reviews (3): Last reviewed commit: "Merge branch 'develop' into issues/16536..." | Re-trigger Greptile}

[Copilot]

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

[Jayant-Sharma-Dev]

@nihal467 please review it

[github-actions]

🚀 Preview Deployment Ready!

🔗 Preview URL: https://pr-16581.care-preview-a7w.pages.dev

📱 Mobile Access:
Scan the QR code below to open the preview on your mobile device.

---

This preview will be automatically updated when you push new commits to this PR.

[github-actions]

🎭 Playwright Test Results

Status: ✅ Passed
Test Shards: 3

Metric	Count
Total Tests	332
✅ Passed	332
❌ Failed	0
⏭️ Skipped	0

📊 Detailed results are available in the playwright-final-report artifact.

_{Run: #10311}

[abhimanyurajeesh]

Next time please make sure to follow the PR template. ( don't create new check list)

[Copilot]

Pull request overview

Copilot reviewed 1 out of 1 changed files in this pull request and generated 1 comment.

[Jayant-Sharma-Dev]

Ok

[Jayant-Sharma-Dev]

@nihal467 1 review is pending

[Jayant-Sharma-Dev]

@NikhilA8606 Is there any problem in this pr ?