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鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

UX: Fix preview wrap in chatlistitem #1067

Conversation

Vivihung
Copy link
Member

Motivation and Context

The preview text wrap causes the ChatListItem changes its height if the latest message is longer than the previous one. It results in instability of the UI.

image

Description

  • Prevent the preview text from wrapping by setting the display to 'block' and applying 'no-wrap' and ellipsis
  • Remove styles that are not in-use.

After the fix:
image

Contribution Checklist

@Vivihung Vivihung added bug Something isn't working PR: ready for review All feedback addressed, ready for reviews typescript labels May 18, 2023
@hathind-ms
Copy link
Contributor

Can we also set min width on chat list item as well?

@teresaqhoang
Copy link
Contributor

Can we also set min width on chat list item as well?

@hathind-ms it's already set in the root styles

@adrianwyatt adrianwyatt merged commit 11d7735 into microsoft:main May 18, 2023
19 checks passed
@Vivihung Vivihung deleted the vivi/bugfix-chatlistitem-text-wrap branch May 18, 2023 18:13
shawncal pushed a commit to johnoliver/semantic-kernel that referenced this pull request May 19, 2023
### Motivation and Context
The preview text wrap causes the ChatListItem changes its height if the
latest message is longer than the previous one. It results in
instability of the UI.

<img width="591" alt="image"
src="https://github.com/microsoft/semantic-kernel/assets/4814277/32f52f71-f670-4859-94a0-84dd5d8616f0">


### Description
* Prevent the preview text from wrapping by setting the display to
'block' and applying 'no-wrap' and ellipsis
* Remove styles that are not in-use.

After the fix:
<img width="215" alt="image"
src="https://github.com/microsoft/semantic-kernel/assets/4814277/d5ff5e8f-2935-4a8c-b108-4f03f0edb592">
golden-aries pushed a commit to golden-aries/semantic-kernel that referenced this pull request Oct 10, 2023
### Motivation and Context
The preview text wrap causes the ChatListItem changes its height if the
latest message is longer than the previous one. It results in
instability of the UI.

<img width="591" alt="image"
src="https://github.com/microsoft/semantic-kernel/assets/4814277/32f52f71-f670-4859-94a0-84dd5d8616f0">


### Description
* Prevent the preview text from wrapping by setting the display to
'block' and applying 'no-wrap' and ellipsis
* Remove styles that are not in-use.

After the fix:
<img width="215" alt="image"
src="https://github.com/microsoft/semantic-kernel/assets/4814277/d5ff5e8f-2935-4a8c-b108-4f03f0edb592">
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working PR: ready for review All feedback addressed, ready for reviews
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants