Fix FOUC for floated collapsible elements outside the content area

There was CSS setting the correct float value, but it only worked on
elements inside the content area because it used .mw-content-ltr and
-rtl. Add another rule to catch things outside the content area (which
should float based on the UI language).

Bug: T198774
Change-Id: I29b71a2e52139e540d719b61964084170d36bc5e

diff --git a/resources/src/jquery/jquery.makeCollapsible.styles.less b/resources/src/jquery/jquery.makeCollapsible.styles.less
index 2281136..ea5b6dd 100644 (file)
--- a/resources/src/jquery/jquery.makeCollapsible.styles.less
+++ b/resources/src/jquery/jquery.makeCollapsible.styles.less
@@ -85,7 +85,15 @@
        }
 }
 
-/* Align the toggle based on the direction of the content language */
+/* Collapsible elements in the UI (outside of the content area) are not in either .mw-content-ltr or
+ * .mw-content-rtl. Align them based on the user language. */
+.mw-collapsible:not( @{exclude} ) th:before,
+.mw-collapsible:not( @{exclude} ):before,
+.mw-collapsible-toggle {
+       float: right;
+}
+
+/* For collapsible elements in the content area, override the alginment based on the content language.  */
 /* @noflip */
 .mw-content-ltr,
 .mw-content-rtl .mw-content-ltr {