Fix: add full-width model names

[gdmka]

Describe Your Changes

This contribution basically fixes the issue found and described thoroughly in this bug report. Because as of the moment, the conversation about UX and visibility of the full model names hit a dead end. I am attempting to contribute in a meaningful way. If you are still opinionated about how you want to proceed UX wise, just discard this PR.

Fixes Issues

• Closes # bug: Truncation of language model names inside the model selection widget. #6060

Self Checklist

• [ x] Added relevant comments, esp in complex areas
• [ x] Updated docs (for bug fixes / features)
• [ x] Created issues for follow-up changes or refactoring needed

---

Important

Enhance UI to display full-width model names in ChatInput.tsx and DropdownModelProvider.tsx, improving visibility and user experience.

• UI Changes:
  • In ChatInput.tsx, updated CSS classes to ensure full-width display of model names by adding flex-1 min-w-0 to the container div.
  • In DropdownModelProvider.tsx, modified button and span elements to use w-full and removed truncate class to display full model names.
• Behavior:
  • Ensures model names are fully visible in dropdowns and input areas, improving user experience.
• Misc:
  • Closes issue bug: Truncation of language model names inside the model selection widget. #6060 related to model name visibility.

^{This description was created by for 7242003. You can customize this summary. It will automatically update as commits are pushed.}

[ellipsis-dev]

Important

Looks good to me! 👍

Reviewed everything up to 7242003 in 2 minutes and 0 seconds. Click for details.

• Reviewed 68 lines of code in 2 files
• Skipped 0 files when reviewing.
• Skipped posting 4 draft comments. View those below.
• Modify your settings and rules to customize what types of comments Ellipsis leaves. And don't forget to react with 👍 or 👎 to teach Ellipsis.

1. web-app/src/containers/ChatInput.tsx:587

• Draft comment:
  Good use of flex utilities: Adding 'flex-1 min-w-0' to the container div and 'w-full' to its child ensures the model name area expands to full available space, fixing the truncation issue.
• Reason this comment was not posted:
  Comment did not seem useful. Confidence is useful = 0% <= threshold 50% This comment is purely informative, explaining the use of flex utilities and how it fixes a truncation issue. It does not provide a suggestion, ask for confirmation, or point out a potential issue.

2. web-app/src/containers/DropdownModelProvider.tsx:395

• Draft comment:
  Container styling updated: Removing background, extra padding, and max-width in favor of 'w-full' allows the model name to display at full width. Confirm that the visual style change is intentional.
• Reason this comment was not posted:
  Comment did not seem useful. Confidence is useful = 30% <= threshold 50% The comment is asking the PR author to confirm that a visual style change is intentional. This falls under the rule of not asking the author to confirm their intention. However, it does provide specific information about what was changed, which could be useful for the author to review. Despite this, the primary focus is on confirmation, which is not allowed.

3. web-app/src/containers/DropdownModelProvider.tsx:397

• Draft comment:
  Setting type='button' on the PopoverTrigger button is a best practice to prevent unexpected form submissions and, along with 'w-full', ensures it uses all available space.
• Reason this comment was not posted:
  Comment looked like it was already resolved.

4. web-app/src/containers/DropdownModelProvider.tsx:507

• Draft comment:
  Removed the 'truncate' class from the span displaying the model ID so that full model names are visible, ensuring better readability.
• Reason this comment was not posted:
  Comment did not seem useful. Confidence is useful = 0% <= threshold 50% This comment is purely informative, explaining what was done and why, without suggesting any changes or asking for confirmation. It doesn't align with the rules for useful comments.

Workflow ID: wflow_TDDlPNuDYNvAw9Nc

^{You can customize by changing your verbosity settings, reacting with 👍 or 👎, replying to comments, or adding code review rules.}

[urmauur]

@gdmka Hey, we have a favorite model and a native web title that shows the full model name on hover. I know it’s a bit delayed when showing the full model name, but this PR makes the layout look broken since we display long model names. Can you make this optional, similar to the settings → appearance → chat width option?

[urmauur]

also the box should be have background color

[gdmka]

@gdmka Hey, we have a favorite model and a native web title that shows the full model name on hover. I know it’s a bit delayed when showing the full model name, but this PR makes the layout look broken since we display long model names. Can you make this optional, similar to the settings → appearance → chat width option?

Hi. Unfortunately, I don't have the free time right now to add the refinements you're requesting. I had the time last week, but I didn't get any feedback then.

Maybe you like to take my contribution and add the refinements you think are appropriate? WDYT?

[urmauur]

ok since we have release cut today, im gonna merge this PR later after release 0.6.10, i'll handle enhancement, thanks for contribute @gdmka