Allow the widget to be squished next to floating elements

Bug: T278476
Change-Id: I8e997bbd9ee7bc50baf4e69bde2dda286505b006
This commit is contained in:
Bartosz Dziewoński 2021-04-14 20:18:43 +02:00
parent 9974268b13
commit 0968d2203b

View file

@ -2,7 +2,28 @@
margin-bottom: 1em; margin-bottom: 1em;
position: relative; position: relative;
clear: both; clear: both;
}
// @supports does not work when nested
@supports ( display: flow-root ) {
.ext-discussiontools-ui-replyWidget {
// Allow the widget to be squished next to floating elements (T278476).
//
// To ensure that everything is squished to the same width, introduce a block formatting context
// (otherwise the preview or textarea could be wider than the container and mess up the layout).
// https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
//
// All of the usual ways to do this (listed on that page) have unwanted side-effects
// (in particular, `overflow: hidden` cuts off VE inspectors), so we must use this relatively
// recent property, and only apply this fix on supporting browsers, notably excluding IE 11
// (https://caniuse.com/?search=flow-root)
display: flow-root;
min-width: 250px;
clear: none;
}
}
.ext-discussiontools-ui-replyWidget { /* stylelint-disable-line no-duplicate-selectors */
> .oo-ui-textInputWidget { > .oo-ui-textInputWidget {
max-width: none; max-width: none;