💄 style: adjust ControlsForm component to adapt to mobile phone display

[bbbugg]

💻 变更类型 | Change Type

• ✨ feat
• 🐛 fix
• ♻️ refactor
• 💄 style
• 👷 build
• ⚡️ perf
• ✅ test
• 📝 docs
• 🔨 chore

🔀 变更说明 | Description of Change

对话窗口的模型控制组件宽度调整，在宽度减少时自动换行，适配移动端显示

修改前：

修改后：

• fix 手机端网址上下文开关显示问题 #8988

📝 补充信息 | Additional Information

Summary by Sourcery

Bug Fixes:

• Update description spans in ControlsForm to use block display, maxWidth, and normal white-space wrapping instead of fixed-width inline-block for better mobile adaptability

[vercel]

@bbbugg is attempting to deploy a commit to the LobeHub Community Team on Vercel.

A member of the Team first needs to authorize it.

[sourcery-ai]

Reviewer's Guide

The PR refactors the ControlsForm component to improve mobile responsiveness by converting fixed-width inline-block description spans into block-level elements with maxWidth and normal text wrapping, and removes the hardcoded width from the URL context control.

File-Level Changes

Change	Details	Files
Make description text wrap on smaller screens	Change ContextCachingSwitch description span to block with maxWidth=300 and whiteSpace=normal Change enableReasoning Switch description span to block with maxWidth=300 and whiteSpace=normal Wrap urlContext description in block span with maxWidth=345 and whiteSpace=normal Remove fixed style.width=445 from urlContext control	src/features/ChatInput/ActionBar/Model/ControlsForm.tsx

Possibly linked issues

• ♻️ refactor: refactor with new market url #123: PR fixes the abnormal display of the URL context switch on mobile by adjusting its component width and wrapping.

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it. You can also reply to a
  review comment with @sourcery-ai issue to create an issue from it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time. You can also comment
  @sourcery-ai title on the pull request to (re-)generate the title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time exactly where you
  want it. You can also comment @sourcery-ai summary on the pull request to
  (re-)generate the summary at any time.
• Generate reviewer's guide: Comment @sourcery-ai guide on the pull
  request to (re-)generate the reviewer's guide at any time.
• Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
  pull request to resolve all Sourcery comments. Useful if you've already
  addressed all the comments and don't want to see them anymore.
• Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
  request to dismiss all existing Sourcery reviews. Especially useful if you
  want to start fresh with a new review - don't forget to comment
  @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

[lobehubbot]

👍 @bbbugg

Thank you for raising your pull request and contributing to our Community
Please make sure you have followed our contributing guidelines. We will review it as soon as possible.
If you encounter any problems, please feel free to connect with us.
非常感谢您提出拉取请求并为我们的社区做出贡献，请确保您已经遵循了我们的贡献指南，我们会尽快审查它。
如果您遇到任何问题，请随时与我们联系。

[gru-agent]

TestGru Assignment

Summary

Link	CommitId	Status	Reason
Detail	eff59dd	🚫 Skipped	No files need to be tested {"src/features/ChatInput/ActionBar/Model/ControlsForm.tsx":"File path does not match include patterns."}

History Assignment

Tip

You can @gru-agent and leave your feedback. TestGru will make adjustments based on your input

[sourcery-ai]

Hey there - I've reviewed your changes - here's some feedback:

• Extract the repeated inline style for the description spans into a shared styled component or CSS class to reduce duplication and improve maintainability.
• Consider centralizing the maxWidth values as theme tokens or constants to ensure consistent sizing across the form.
• Verify that the new wrapping behavior works across all mobile breakpoints and doesn’t introduce horizontal overflow.

Prompt for AI Agents

Please address the comments from this code review:
## Overall Comments
- Extract the repeated inline style for the description spans into a shared styled component or CSS class to reduce duplication and improve maintainability.
- Consider centralizing the maxWidth values as theme tokens or constants to ensure consistent sizing across the form.
- Verify that the new wrapping behavior works across all mobile breakpoints and doesn’t introduce horizontal overflow.

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 77.17%. Comparing base (043e7da) to head (bbfc95f).
⚠️ Report is 15 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #9013   +/-   ##
=======================================
  Coverage   77.17%   77.17%           
=======================================
  Files         810      810           
  Lines       48848    48848           
  Branches     6587     6586    -1     
=======================================
  Hits        37696    37696           
  Misses      11146    11146           
  Partials        6        6           

Flag	Coverage Δ
app	77.05% <ø> (ø)
database	96.26% <ø> (ø)
packages/electron-server-ipc	74.61% <ø> (ø)
packages/file-loaders	83.59% <ø> (ø)
packages/model-bank	100.00% <ø> (ø)
packages/model-runtime	75.07% <ø> (ø)
packages/prompts	100.00% <ø> (ø)
packages/utils	60.47% <ø> (ø)
packages/web-crawler	59.57% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

Components	Coverage Δ
Store	68.63% <ø> (ø)
Services	61.85% <ø> (ø)
Server	66.33% <ø> (ø)
Libs	42.11% <ø> (ø)
Utils	73.57% <ø> (ø)

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[arvinxx]

感觉 switch 那个组件应该换到第二行？

[lobehubbot]

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

---

I feel that switch component should be switched to the second line?

[bbbugg]

感觉 switch 那个组件应该换到第二行？

换到第二行中间吗，感觉有点丑啊哈哈

[lobehubbot]

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

---

I feel that switch component should be switched to the second line?

Do you change to the middle of the second line? It feels a bit ugly haha

[arvinxx]

第二行左边，你看下移动端设置里面，这种开关都是放第二行左边的

[lobehubbot]

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

---

On the left side of the second line, you can look at the mobile terminal settings. These switches are placed on the left side of the second line.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
lobe-chat-preview	Ready	Preview	Comment	Sep 1, 2025 2:18am

[lobehubbot]

❤️ Great PR @bbbugg ❤️

The growth of project is inseparable from user feedback and contribution, thanks for your contribution! If you are interesting with the lobehub developer community, please join our discord and then dm @arvinxx or @canisminor1990. They will invite you to our private developer channel. We are talking about the lobe-chat development or sharing ai newsletter around the world.
项目的成长离不开用户反馈和贡献，感谢您的贡献! 如果您对 LobeHub 开发者社区感兴趣，请加入我们的 discord，然后私信 @arvinxx 或 @canisminor1990。他们会邀请您加入我们的私密开发者频道。我们将会讨论关于 Lobe Chat 的开发，分享和讨论全球范围内的 AI 消息。

[lobehubbot]

🎉 This PR is included in version 1.120.4 🎉

The release is available on:

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

Your semantic-release bot 📦🚀