fix(ui): prevent text overflow on small screens (<370px)

[WhoamiI00]

Summary

Fixed a text overflow issue on the Features section for small screens (<370px) where the heading was overflowing off the screen.

Changes

• Updated the heading in src/routes/(website)/features.svelte (or whichever file you modified).
• Applied whitespace-normal and adjusted font size (text-2xl) for screens smaller than 370px to allow wrapping.
• Used min-[370px]:whitespace-nowrap (or your specific method) to ensure the text remains on a single line for larger screens.

Related Issue

Closes #2495

Screenshots

Summary by CodeRabbit

• Style
  • Improved responsive typography on the features section with better scaling across device sizes.
  • Refined text wrapping behavior for improved readability on smaller screens.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

A single file in the marketing components section (features.svelte) was updated to implement responsive typography. The heading element's default font size was reduced from text-3xl to text-2xl with line height adjusted from leading-12 to leading-10. Responsive variants were added using a custom breakpoint (min-[370px]) to restore the larger typography at wider screen sizes. Additionally, the whitespace-nowrap class on an inline text span was converted to a responsive variant to enable wrapping behavior on smaller screens.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

• Single file with purely styling adjustments
• Homogeneous changes following a consistent responsive design pattern
• No logic modifications or structural changes
• Straightforward typography and spacing adjustments that are easy to verify visually

Pre-merge checks and finishing touches

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The PR title clearly and accurately summarizes the main change: fixing text overflow on screens smaller than 370px, which directly addresses the core problem described in the changeset.
Linked Issues check	✅ Passed	The PR changes directly implement the fix for issue #2495 by adjusting typography and adding responsive breakpoints to prevent text overflow on screens below 370px.
Out of Scope Changes check	✅ Passed	All changes are scoped to the features component and directly address the text overflow issue; no unrelated or out-of-scope modifications were introduced.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 0d70466 and 8bf731e.

📒 Files selected for processing (1)

• src/routes/(marketing)/(components)/features.svelte (1 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

• src/routes/(marketing)/(components)/features.svelte

---

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