ALL-481: updated the responsive text line-height for M9

[Imtiyaz-Jiwani-16]

updated the responsive text line-height for M9

Summary by CodeRabbit

• Style
  • Improved text spacing in word and sentence displays.
  • Added responsive line heights for better readability across mobile and desktop screen sizes.

[coderabbitai]

Walkthrough

Responsive lineHeight values were added to word and highlighted sentence Typography components, using 1.4 on extra-small screens and 4.5rem from the medium breakpoint.

Changes

Responsive Typography

Layer / File(s)	Summary
Responsive line-height rendering src/components/Mechanism/WordsOrImage.jsx, src/views/Practice/Practice.jsx	Word and highlighted sentence Typography components now use breakpoint-specific line heights: 1.4 on xs and 4.5rem on md.

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

Possibly related PRs

• Sunbird-ALL/all-learner-ai-app#191: Modifies the same highlightWords rendering in Practice.jsx.
• Sunbird-ALL/all-learner-ai-app#229: Refactors the same highlightWords output.
• Sunbird-ALL/all-learner-ai-app#937: Adjusts responsive line-height styling in WordsOrImage.jsx.

Suggested reviewers: gouravmore, swayangjit

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
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.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly matches the PR’s main change: making M9 text line-height responsive.

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

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/views/Practice/Practice.jsx`:
- Line 3768: Update both Typography components in the type === "char" || type
=== "word" branch to use the same responsive lineHeight configuration as the
sentence branch instead of fixed "50px". Preserve the existing rendering
behavior and styling otherwise.

🪄 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: 53ce342f-2df4-49d7-a524-7baaaefd2ae1

📥 Commits

Reviewing files that changed from the base of the PR and between 5c9493e and 952ea3f.

📒 Files selected for processing (2)

• src/components/Mechanism/WordsOrImage.jsx
• src/views/Practice/Practice.jsx

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud