๐ style(ModelSelect): add responsive layout for mobile devices #7960
Conversation
|
@kingsword09 is attempting to deploy a commit to the LobeHub Team on Vercel. A member of the Team first needs to authorize it. |
dosubot
bot
added
the
size:XS
|
๐ @kingsword09 Thank you for raising your pull request and contributing to our Community |
dosubot
bot
added
๐ Design
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
There was a problem hiding this comment.
PR Summary
This PR improves the mobile UI by adding horizontal scrolling for long model names in the ModelSelect component, preventing truncation on smaller screens.
- Added
useResponsivehook insrc/components/ModelSelect/index.tsxto detect mobile devices - Set fixed width of
80vwfor mobile view containers - Implemented horizontal scrolling with
overflowX: 'auto'andwhiteSpace: 'nowrap'for model names - Added
overflow: 'hidden'to parent container for proper scroll containment
๐ก (5/5) You can turn off certain types of comments like style here!
1 file(s) reviewed, 2 comment(s)
Edit PR Review Bot Settings | Greptile
| return ( | ||
| <Flexbox | ||
| align={'center'} | ||
| gap={32} | ||
| horizontal | ||
| justify={'space-between'} | ||
| style={{ overflow: 'hidden', position: 'relative' }} | ||
| style={{ overflow: 'hidden', position: 'relative', width: mobile ? '80vw' : 'auto' }} |
There was a problem hiding this comment.
style: Using a fixed 80vw width could cause layout issues on very small or large mobile screens. Consider using min/max width constraints.
| > | ||
| <Flexbox align={'center'} gap={8} horizontal style={{ overflow: 'hidden' }}> | ||
| <ModelIcon model={model.id} size={20} /> | ||
| <Typography.Text ellipsis>{model.displayName || model.id}</Typography.Text> | ||
| <Typography.Text style={mobile ? { overflowX: 'auto', whiteSpace: 'nowrap' } : {}}> |
There was a problem hiding this comment.
style: overflowX: 'auto' may cause unintended scrollbars. Consider using 'overflow: hidden; text-overflow: ellipsis' with a max-width instead.
There was a problem hiding this comment.
The reason for displaying horizontal scrollbars is to make it easier for users to know that they can scroll horizontally.
Codecov ReportAll modified and coverable lines are covered by tests โ
Additional details and impacted files@@ Coverage Diff @@
## main #7960 +/- ##
=======================================
Coverage 88.47% 88.47%
=======================================
Files 821 821
Lines 60274 60274
Branches 3806 3806
=======================================
Hits 53325 53325
Misses 6949 6949
Flags with carried forward coverage won't be shown. Click here to find out more. โ View full report in Codecov by Sentry. ๐ New features to boost your workflow:
|
๐ป ๅๆด็ฑปๅ | Change Type
๐ ๅๆด่ฏดๆ | Description of Change
If the model name is too long for mobile, you can scroll horizontally.
closes: #7513
๐ ่กฅๅ ไฟกๆฏ | Additional Information