hide icon for long root errors using css container query with flex wrap solution

[joshunrau]

previously, long error messages would look ugly

Summary by CodeRabbit

• Bug Fixes
  • Improved error message display layout with better wrapping behavior and responsive icon visibility on form inputs.
  • Refined form-level error message styling for better visual alignment.

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

[coderabbitai]

Caution

Review failed

The pull request is closed.

Walkthrough

Restructured the ErrorMessage component to support flexible icon wrapping and improved layout with new container hierarchy. Updated Form component to wrap root error display with adjusted spacing and utilize the new hideIconOnWrap prop for adaptive rendering.

Changes

Cohort / File(s)	Summary
ErrorMessage Component Refactoring src/components/Form/ErrorMessage.tsx	Added hideIconOnWrap?: boolean prop. Refactored rendering from single-line icon+text to multi-container structure with wrapper div, dedicated icon container, and responsive icon visibility. Changed early-return logic for null error cases.
Form Component Integration src/components/Form/Form.tsx	Wrapped root error display in container with -mt-3 spacing class and integrated new hideIconOnWrap prop usage.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• fix some styling issues #60: Modifies ErrorMessage component's layout/markup and container structure in the same file.

Poem

📦 Errors now wrap with graceful pride,
Icons flex when space is tight,
Containers dance side by side,
A layout reborn, polished and right! ✨

✨ Finishing touches

• 📝 Generate docstrings

---

---

📜 Recent review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 2237c83 and 661ae9e.

📒 Files selected for processing (2)

• src/components/Form/ErrorMessage.tsx
• src/components/Form/Form.tsx

_{✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.}

---

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

[github-actions]

🎉 This PR is included in version 5.0.1 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀