Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix: assistant picker broken if some assistant names > 20 chars #4568

Merged
merged 3 commits into from
Apr 4, 2024

Conversation

philipperolet
Copy link
Contributor

@philipperolet philipperolet commented Apr 4, 2024

Description

See title & screenshot
Note: also switches spinner to spinner2 in instructions, which fixes https://github.com/dust-tt/tasks/issues/612
Screenshot from 2024-04-04 14-30-07
Screenshot from 2024-04-04 14-35-55

Risk

Deploy Plan

@philipperolet philipperolet requested a review from flvndvd April 4, 2024 12:38
* `maxStringLength`.
* @param str The string to truncate.
*/
export function ellipsis(str: string, maxStringLength: number) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why not using CSS classes for this?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We could but IMHO the downsides are:

  • not usable elswhere than inside tags in .tsx;
  • less convenient, harder to setup ( text-ellipsis cannot be used alone, we need to think about other concerns such as do I want overflow-hidden, wrap/no wrap, do I need to set a max-width --> asking those questions is sometimes relevant, sometimes not and we lose time and complexify css just for the sake of the ellipsis)

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

less convenient, harder to setup ( text-ellipsis cannot be used alone, we need to think about other concerns such as do I want overflow-hidden, wrap/no wrap, do I need to set a max-width --> asking those questions is sometimes relevant, sometimes not and we lose time and complexify css just for the sake of the ellipsis)

To me, it can be configure as easily as what's being done here and offer a nicer UX. Here 20 characters might work on a laptop but not on mobile. Leveraging CSS covers everything 😉

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

fine, fine 👍

visual={c.pictureUrl}
hasAction={false}
onClick={() => {
onItemClick(c);
setSearchText("");
}}
className="truncate"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

❤️

@philipperolet philipperolet merged commit 0bd9f9a into main Apr 4, 2024
5 checks passed
@philipperolet philipperolet deleted the fix-picker branch April 4, 2024 15:07
flvndvd pushed a commit that referenced this pull request May 26, 2024
* Fix: assistant picker broken if some assistant names > 20 chars

* review

* clean
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants