fix: remove unnecessary padding from dosage highlight

[amjithtitus09]

Proposed Changes

Fixes #issue_number

• Change 1
• Change 2
• Additional context if needed

Tagging: @ohcnetwork/care-fe-code-reviewers

Merge Checklist

• Add specs that demonstrate the bug or test the new feature.
• Update product documentation.
• Ensure that UI text is placed in I18n files.
• Prepare a screenshot or demo video for the changelog entry and attach it to the issue.
• Request peer reviews.
• Complete QA on mobile devices.
• Complete QA on desktop devices.
• Add or update Playwright tests for related changes

Summary by CodeRabbit

• Style
  • Adjusted highlighted dosage formatting by removing extra padding for a more compact appearance.

[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]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: c940e34c-92ed-4f5f-97f0-3bee73fbd10f

📥 Commits

Reviewing files that changed from the base of the PR and between dd3299d and d75058c.

📒 Files selected for processing (1)

• src/components/Medicine/FormattedDosage.tsx

---

Walkthrough

Changes

Dosage highlight styling

Layer / File(s)	Summary
Adjust highlight span spacing src/components/Medicine/FormattedDosage.tsx	The default yellow dosage highlight removes px-1.5 and py-0.5 while retaining its other styling classes.

Possibly related PRs

• ohcnetwork/care_fe#16562: Updates the same dosage highlight rendering with non-unit highlight behavior.

Suggested reviewers: copilot

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly describes the primary change: removing unnecessary padding from the dosage highlight.
Description check	✅ Passed	The description matches the repository template, including Proposed Changes and the Merge Checklist.
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

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix-minor-padding

---

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

[Copilot]

Pull request overview

Removes extra internal spacing from the highlighted (non-unit) dosage rendering in the medicine dosage formatter, so the highlight styling doesn’t add unintended padding around the dosage text.

Changes:

• Removed px-1.5 py-0.5 padding from the highlighted dosage <span> styling in FormattedDosage.

[cloudflare-workers-and-pages]

Deploying care-preview with    Cloudflare Pages

Latest commit:	d75058c
Status:	✅  Deploy successful!
Preview URL:	https://54307045.care-preview-a7w.pages.dev
Branch Preview URL:	https://fix-minor-padding.care-preview-a7w.pages.dev

View logs

[greptile-apps]

Greptile Summary

Removes the horizontal and vertical padding (px-1.5 py-0.5) from the yellow highlight span used for non-unit dosage values in FormattedDosage.

• The yellow bg-yellow-100 highlight and font-semibold are retained; only the padding is removed.
• The rounded class is now a no-op because, without padding, the background does not extend beyond the character glyphs and there is no visible border-radius to render.

Confidence Score: 4/5

Safe to merge — the change is a single Tailwind class removal with no logic impact.

The only modified file is a presentational component. Removing padding is cosmetic and carries no functional risk, but the rounded class that remains becomes visually inert without surrounding padding, which is a minor inconsistency worth tidying up before merging.

src/components/Medicine/FormattedDosage.tsx — consider whether rounded should also be removed alongside the padding.

Important Files Changed

Filename	Overview
src/components/Medicine/FormattedDosage.tsx	Removes px-1.5 py-0.5 padding from the yellow dosage highlight span; rounded class is now effectively a no-op without any background padding to show the rounded corners.

_{Reviews (1): Last reviewed commit: "fix: remove unnecessary padding from dos..." | Re-trigger Greptile}

[greptile-apps]

With px-1.5 py-0.5 removed, there is no background extending beyond the text, so the rounded class has no visible effect. If the intent is a flat inline highlight with no padding, rounded can be dropped; if some padding is still desired (e.g., just horizontal), the padding values can be adjusted rather than fully removed.

Suggested change

	"rounded bg-yellow-100 font-semibold text-yellow-900",
	"bg-yellow-100 font-semibold text-yellow-900",

Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!

[github-actions]

🎭 Playwright Test Results

Status: ✅ Passed
Test Shards: 3

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

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

_{Run: #10256}