fix: resolve HorizontalMilestoneCard right overflow in Reports screen

[suhas2006-code]

📝 Description

Fixes a right-side RenderFlex overflow in Reports milestone cards (Missed / Regressed) on narrower Android widths.

🔧 Changes Made

• Wrapped the text column in HorizontalMilestoneCard with Flexible.
• Reduced icon-to-text spacing from 16 to 8.
• Added TextOverflow.ellipsis to the card label for safety.
• Added before/after screenshots to verify the visual fix.

📷 Screenshots or Visual Changes

Before

After

✅ Checklist

• I have read the contributing guidelines.
• I have added tests that prove my fix is effective or that my feature works. (Visual proof provided via screenshots).
• I have added necessary documentation (if applicable).
• Any dependent changes have been merged and published in downstream modules.

[coderabbitai]

📝 Walkthrough

Walkthrough

The milestone_cards widget layout is restructured from a fixed horizontal arrangement to a flexible column-based layout. The change reduces spacing between icon and text from 16 to 8 pixels and adds text truncation with ellipsis handling for better accommodation of long labels and varying widget widths.

Changes

Cohort / File(s)	Summary
Milestone Cards Layout Refactor patient/lib/presentation/reports/widgets/milestone_cards.dart	Replaces fixed horizontal arrangement with Flexible wrapping column, reduces inter-item spacing from 16 to 8, and adds text truncation with overflow ellipsis for improved label handling across varying widths.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 A milestone card hops with grace,
Flexible columns find their place,
Text that once would overflow,
Now truncates with gentle flow,
Spacing tight, but layouts right! ✨

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The PR title accurately describes the main fix: resolving a right overflow issue in HorizontalMilestoneCard on the Reports screen.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

📝 Coding Plan

• Generate coding plan for human review comments

---

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 `@patient/lib/presentation/reports/widgets/milestone_cards.dart`:
- Around line 160-164: The Text widget displaying the label (the Text(label,
style: Theme.of(context).textTheme.bodyMedium, overflow: TextOverflow.ellipsis))
should include maxLines: 1 so the ellipsis is applied instead of wrapping;
update that Text instance in milestone_cards.dart (the label Text inside the
milestone card widget) to add maxLines: 1 while keeping the existing style and
overflow settings.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 2689e0e8-7752-456b-b71c-4153986bd9a0

📥 Commits

Reviewing files that changed from the base of the PR and between 051a4f3 and 0b332c5.

📒 Files selected for processing (1)

• patient/lib/presentation/reports/widgets/milestone_cards.dart

[coderabbitai]

⚠️ Potential issue | 🟡 Minor

Add maxLines: 1 for TextOverflow.ellipsis to work correctly.

TextOverflow.ellipsis only triggers when the text exceeds the available lines. Without maxLines, the text will wrap to new lines before ellipsis is applied, which could still cause layout issues in this fixed-height (90px) card.

Proposed fix

                 Text(
                   label,
                   style: Theme.of(context).textTheme.bodyMedium,
+                  maxLines: 1,
                   overflow: TextOverflow.ellipsis,
                 ),

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

	Text(
	label,
	style: Theme.of(context).textTheme.bodyMedium,
	overflow: TextOverflow.ellipsis,
	),
	Text(
	label,
	style: Theme.of(context).textTheme.bodyMedium,
	maxLines: 1,
	overflow: TextOverflow.ellipsis,
	),

🤖 Prompt for AI Agents

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

In `@patient/lib/presentation/reports/widgets/milestone_cards.dart` around lines
160 - 164, The Text widget displaying the label (the Text(label, style:
Theme.of(context).textTheme.bodyMedium, overflow: TextOverflow.ellipsis)) should
include maxLines: 1 so the ellipsis is applied instead of wrapping; update that
Text instance in milestone_cards.dart (the label Text inside the milestone card
widget) to add maxLines: 1 while keeping the existing style and overflow
settings.