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 Chat Message container to align and manage the autosizer handling #7504

Merged
merged 8 commits into from Oct 10, 2023

Conversation

kmcgrady
Copy link
Collaborator

@kmcgrady kmcgrady commented Oct 5, 2023

Describe your changes

Removing the autosizer caused some issues on the chat message this is due to two things:

  1. The message content area is extending beyond the allocated space. We fix this by adding a min width = 0 on it.
    • It's unintuitive, but it overrides (in flexbox) the computation of width to inform the browser that the amount can shrink (see this article).
  2. Flexbox believed it can shrink the avatar which causes unexpected issues. We ensure it doesn't by setting flex-shrink to 0 (it looks like (1) resolves the issue cause the message content doesn't unnecessarily grow, but it's good to inform the browser).

GitHub Issue Link (if applicable)

#7473

Testing Plan

  • Explanation of why no additional tests are needed
  • Unit Tests (JS and/or Python)
  • E2E Tests
  • Any manual testing needed?

Contribution License Agreement

By submitting this pull request you agree that all contributions to this project are made under the Apache 2.0 license.

@willhuang1997 willhuang1997 marked this pull request as ready for review October 9, 2023 18:07
@sfc-gh-wihuang sfc-gh-wihuang merged commit 57e4ad0 into develop Oct 10, 2023
44 checks passed
@willhuang1997 willhuang1997 deleted the fix/chat-message-sizing branch October 26, 2023 18:15
eric-skydio pushed a commit to eric-skydio/streamlit that referenced this pull request Dec 20, 2023
…streamlit#7504)

* Fix Chat Message container to align and manage the autosizer handling

* Remove chat message snapshots

* Add Updated Snapshots

* Attempt to make new playwright test

* Remove async def as it's not supported

* Add new snapshots

* Minor cleanup

---------

Co-authored-by: willhuang1997 <willhuang1997@gmail.com>
zyxue pushed a commit to zyxue/streamlit that referenced this pull request Mar 22, 2024
…streamlit#7504)

* Fix Chat Message container to align and manage the autosizer handling

* Remove chat message snapshots

* Add Updated Snapshots

* Attempt to make new playwright test

* Remove async def as it's not supported

* Add new snapshots

* Minor cleanup

---------

Co-authored-by: willhuang1997 <willhuang1997@gmail.com>
zyxue pushed a commit to zyxue/streamlit that referenced this pull request Apr 16, 2024
…streamlit#7504)

* Fix Chat Message container to align and manage the autosizer handling

* Remove chat message snapshots

* Add Updated Snapshots

* Attempt to make new playwright test

* Remove async def as it's not supported

* Add new snapshots

* Minor cleanup

---------

Co-authored-by: willhuang1997 <willhuang1997@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants