👀 @Hubedge

Thank you for raising an issue. We will investigate into the matter and get back to you as soon as possible.
Please make sure you have given us as much context as possible.
非常感谢您提交 issue。我们会尽快调查此事，并尽快回复您。 请确保您已经提供了尽可能多的背景信息。

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

📦 Deployment environment

Vercel

📦 Deployment mode

Server-side mode (lobe-chat-database mirror)

📌 Software version

1.81.9

💻 System environment

Android

🌐 Browser

Chrome

🐛 Question description

When the model name is too long, the name display is incomplete

📷 Reproduction steps

No response

🚦 Expected results

Able to display the model name in full

📝 Supplementary information

No response

Hello @Hubedge! I'm Dosu, here to help you tackle bugs, answer questions, and guide you in becoming a contributor. Let me know how I can assist you while we wait for a human maintainer!

I found a similar closed issue related to custom model names not displaying correctly. The issue was resolved by a pull request that fixed the display problem ^[1]. You might want to check if the solution implemented in that pull request can be applied to your case. Additionally, the lobe-chat codebase includes CSS components that handle text overflow or truncation, which might be useful for addressing the issue of long model names not displaying completely ^[2][3].

To continue talking to Dosu, mention @dosu.

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Bug Report | Other}

@dosu looks like a different bug

To address the issue of long model names not displaying completely on mobile devices, you can consider using CSS properties that handle text overflow or truncation. The lobe-chat codebase uses the following properties:

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

These properties can help ensure that text is truncated with an ellipsis when it exceeds the available space, preventing it from being cut off abruptly ^[1][2].

Additionally, for mobile devices, the Popover component is styled to ensure content is fully visible by setting its width to the full viewport width (100vw) when the device is mobile ^[3]. This approach can be useful for ensuring that model names are displayed correctly on smaller screens.

If these solutions don't resolve the issue, you might need to explore further adjustments in the layout or font size specifically for mobile views.

To continue talking to Dosu, mention @dosu.

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Bug Report | Other}