fix(ui): fix cut off buttons in chat message #1373
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
dlavrenuek
force-pushed
the
fix-ui-buttons
branch
from
bcc3a7e to
475cc91
Compare
dlavrenuek
changed the title
nsarrazin
added
bug
nsarrazin
approved these changes
Jul 29, 2024
ice91
pushed a commit
to ice91/chat-ui
that referenced
this pull request
Oct 30, 2024
fix(ui): tool buttons in chat message
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Fixes #1372 🤗
Description
From the linked issue following bugs are fixed:
Bildschirmaufnahme.2024-07-27.um.21.43.54.mov
Does not fix (due to having not enough context about why it was implemented this way):
Additional context:
gap-8 in ChatWindow is enough to fit the buttons. I have removed
2xl:gap-7since this would make the gap smaller and is not needed any more.I assume that padding and negative margin in ChatMessage was added to increase the area for mouse hover events over the bottom edge of the element, so to make the buttons appear quicker. I did keep this approach but have adjusted the negative margin (here) to be the same as padding, so the gap defined in ChatWindow is not affected. With gap-8 and p
Using margin and absolute positioning to position the buttons bar should not be needed (at least I don't see a reason for it without additional context), so I did simplify the positioning to only use absolute positioning without margin here. Also I did remove the
md:bottom-xbecause it seems that it should compensate the different gap defined in ChatWindow, which is not needed with the changes in this PR any more. New position-bottom-4combined with negative margin-mb-4the button bar is positioned at the edge of the next message since gap is 8, this keeps the same position as it is now.