Fixes overflowing input text #9691
Conversation
WalkthroughThe pull request modifies the Changes
Assessment against linked issues
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
✅ Deploy Preview for care-ohc ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
src/pages/Organization/components/OrganizationSelector.tsx (2)
124-127: Add scroll indicators and keyboard navigation support.The overflow handling implementation successfully fixes the text overflow issue. However, consider improving accessibility by:
- Adding visible scroll indicators
- Supporting keyboard navigation for scrolling
Apply this diff to enhance the implementation:
- <div className="flex items-center h-9 w-full min-w-full rounded-md border border-gray-200 bg-white px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-gray-950 placeholder:text-gray-500 focus-visible:border-primary-500 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:border-gray-800 dark:file:text-gray-50 dark:placeholder:text-gray-400 dark:focus-visible:ring-gray-300"> - <div className="w-full text-nowrap overflow-x-auto"> + <div className="flex items-center h-9 w-full min-w-full rounded-md border border-gray-200 bg-white px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-gray-950 placeholder:text-gray-500 focus-visible:border-primary-500 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:border-gray-800 dark:file:text-gray-50 dark:placeholder:text-gray-400 dark:focus-visible:ring-gray-300 overflow-x-auto scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-transparent"> + <div className="w-full text-nowrap" tabIndex={0} role="region" aria-label={`${level.name} content`}>
124-127: Consider alternative approaches for better UX.While horizontal scrolling works, consider these more user-friendly alternatives:
- Text truncation with ellipsis
- Tooltip showing full text on hover
- Multi-line support
Here's an example implementation using truncation with tooltip:
- <div className="flex items-center h-9 w-full min-w-full rounded-md border border-gray-200 bg-white px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-gray-950 placeholder:text-gray-500 focus-visible:border-primary-500 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:border-gray-800 dark:file:text-gray-50 dark:placeholder:text-gray-400 dark:focus-visible:ring-gray-300"> - <div className="w-full text-nowrap overflow-x-auto"> + <div className="flex items-center h-9 w-full min-w-full rounded-md border border-gray-200 bg-white px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-gray-950 placeholder:text-gray-500 focus-visible:border-primary-500 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:border-gray-800 dark:file:text-gray-50 dark:placeholder:text-gray-400 dark:focus-visible:ring-gray-300"> + <div className="w-full truncate" title={level.name}>
|
@cbum-dev can you checkout the nitpicks by code rabbit and see if its useful? |
There was a problem hiding this comment.
also @cbum-dev would it be possible to remove the trash button beside the org. selector?
so instead of user clicking remove button to change the selected option, manage the state accordingly when new option is selected.
Okay I'm looking into it. |
|
👋 Hi, @cbum-dev, This message is automatically generated by prince-chrismc/label-merge-conflicts-action so don't hesitate to report issues/improvements there. |
|
@cbum-dev you can use this PR for the change requested by @rithviknishad |
Yeah I'm working on it. I'll push the changes soon. |
Proposed Changes
@ohcnetwork/care-fe-code-reviewers
Merge Checklist
Summary by CodeRabbit