💄 style: adjust modal setting form styles for improved layout and responsiveness

[bbbugg]

💻 Change Type

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

🔗 Related Issue

🔀 Description of Change

在1920*1080分辨率、125%缩放的屏幕上打开模型设置form显示不全，需要往下滚动才行。实际上，通过浏览器页面缩放就能触发。
看到 #9870 想到模型设置form也有类似的显示问题。

🧪 How to Test

• Tested locally
• Added/updated tests
• No tests needed

📸 Screenshots / Videos

Before	After

📝 Additional Information

Summary by Sourcery

Apply consistent inline styles to model setting modals to constrain height and arrange content in a flex column layout, preventing overflow on high-resolution or zoomed screens

Bug Fixes:

• Prevent model setting forms from overflowing and requiring scroll on high-DPI or zoomed viewports

Enhancements:

• Add flex column display and max-height constraint to CreateNewModelModal
• Add flex column display and max-height constraint to ModelConfigModal

[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 (collapsed on small PRs)

Reviewer's Guide

This PR adjusts the layout of two setting modals by injecting a responsive styles prop that constrains their height and enforces a flex-column layout, preventing overflow on high-zoom or lower-resolution screens.

Class diagram for updated modal components with responsive styles

classDiagram
  class ModelConfigModal {
    +open: boolean
    +setOpen: function
    +styles: object
    +closeModal(): void
    +styles_content: "flex column"
    +styles_maxHeight: number
  }
  class CreateNewModelModal {
    +open: boolean
    +setOpen: function
    +styles: object
    +closeModal(): void
    +styles_content: "flex column"
    +styles_maxHeight: number
  }
  ModelConfigModal <|-- CreateNewModelModal

Loading

File-Level Changes

Change	Details	Files
Constrain modal content height and enforce flex-column layout	Add styles prop to wrap modal content Set content display to 'flex' and flexDirection to 'column' Limit content height with maxHeight: 'calc(100vh - 150px)'	src/app/[variants]/(main)/settings/provider/features/ModelList/CreateNewModelModal/index.tsx src/app/[variants]/(main)/settings/provider/features/ModelList/ModelConfigModal/index.tsx

Possibly linked issues

• 💄 style: improve provider modal height when creating custom provider #9870: The PR fixes layout and scrolling in model settings forms, directly addressing the issue's inaccessible content due to responsiveness.

---

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.

[gru-agent]

TestGru Assignment

Summary

Link	CommitId	Status	Reason
Detail	bd41cbe	🚫 Skipped	No files need to be tested {"src/app/[variants]/(main)/settings/provider/features/ModelList/CreateNewModelModal/index.tsx":"File path does not match include patterns.","src/app/[variants]/(main)/settings/provider/features/ModelList/ModelConfigModal/index.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

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

[sourcery-ai]

Hey there - I've reviewed your changes and they look great!

---

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 84.49%. Comparing base (1fe6a59) to head (bd41cbe).
⚠️ Report is 3 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff            @@
##             main    #9890     +/-   ##
=========================================
  Coverage   84.49%   84.49%             
=========================================
  Files         944      944             
  Lines       64879    64879             
  Branches     9618     7951   -1667     
=========================================
  Hits        54818    54818             
  Misses      10061    10061             

Flag	Coverage Δ
app	80.06% <ø> (ø)
database	98.40% <ø> (ø)
packages/agent-runtime	98.37% <ø> (ø)
packages/context-engine	93.58% <ø> (ø)
packages/electron-server-ipc	93.76% <ø> (ø)
packages/file-loaders	92.21% <ø> (ø)
packages/model-bank	100.00% <ø> (ø)
packages/model-runtime	92.16% <ø> (ø)
packages/prompts	77.29% <ø> (ø)
packages/python-interpreter	96.50% <ø> (ø)
packages/utils	94.50% <ø> (ø)
packages/web-crawler	97.07% <ø> (ø)

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

Components	Coverage Δ
Store	74.37% <ø> (ø)
Services	61.69% <ø> (ø)
Server	77.39% <ø> (ø)
Libs	50.82% <ø> (ø)
Utils	75.00% <ø> (ø)

🚀 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]

Actually, I personally think it would be better to change the model settings modal to a sidebar drawer in the future.

---

This comment was translated by Claude.

Original Content

其实我个人感觉,后面模型设置弹窗应该改成侧边栏的抽屉会更好一些

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

[lobehubbot]

🎉 This PR is included in version 1.142.3 🎉

The release is available on:

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

Your semantic-release bot 📦🚀