From 0968d2203b1affc903a2629dc8e1bbd3bbb0ba9f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bartosz=20Dziewo=C5=84ski?= Date: Wed, 14 Apr 2021 20:18:43 +0200 Subject: [PATCH] Allow the widget to be squished next to floating elements Bug: T278476 Change-Id: I8e997bbd9ee7bc50baf4e69bde2dda286505b006 --- modules/dt.ui.ReplyWidget.less | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/modules/dt.ui.ReplyWidget.less b/modules/dt.ui.ReplyWidget.less index 1041843cd..8fe469199 100644 --- a/modules/dt.ui.ReplyWidget.less +++ b/modules/dt.ui.ReplyWidget.less @@ -2,7 +2,28 @@ margin-bottom: 1em; position: relative; 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 { max-width: none;