mirror of
https://github.com/discourse/discourse.git
synced 2024-12-23 04:23:49 +08:00
897518e874
Prior to this fix the following sequence would cause an overflow:
- open a thread
- expand thread panel to maximum width
- close panel
- reduce window width
- open thread again
- 💥
The fix is now ensuring that we never use or set a width which would cause the main panel + side panel to be larger than the chat container. We also removed the service as it was overkill for this case and it's easier to have all the implementation at one place.
This commit also uses JS animation api to set the width of the panel.
<!-- NOTE: All pull requests should have tests (rspec in Ruby, qunit in JavaScript). If your code does not include test coverage, please include an explanation of why it was omitted. -->
44 lines
753 B
SCSS
44 lines
753 B
SCSS
.chat-notices {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5em;
|
|
position: absolute;
|
|
top: 0;
|
|
z-index: 10;
|
|
width: 100%;
|
|
|
|
.full-page-chat & {
|
|
padding-inline: 1rem;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
&__notice,
|
|
.chat-retention-reminder {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
background: var(--tertiary-low);
|
|
padding: 0.5rem;
|
|
color: var(--primary);
|
|
min-width: 280px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
gap: 0.25rem;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.dismiss-btn {
|
|
color: var(--primary-medium);
|
|
align-self: flex-start;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
background: var(--tertiary-medium);
|
|
}
|
|
}
|
|
}
|
|
|
|
.full-page-chat .chat-notices {
|
|
top: 2rem;
|
|
}
|