frontend/src/index.css

@@ -642,6 +642,26 @@ body
   font-family: 'BTRC Mongolian', 'Mongolian Baiti', 'Noto Sans JP Variable', sans-serif;
 }
 
+/* Include portalled dialogues and toasts, and controls with UA writing modes. */
+html:lang(mn-Mong) body > :not(#root),
+html:lang(mn-Mong) #root > :not(.app-layout),
+html:lang(mn-Mong) :is(button, input, select, textarea),
+[data-vertical-preview] :is(
+    .main-area:not(.posts-main-area, .tags-main-area, .wiki-main-area),
+    .sidebar > *, .tag-list-filter, .post-list > *,
+    .top-nav-brand-link, .top-nav-menu-link,
+    .top-nav-user-desktop, .top-nav-user-mobile, .top-nav-mobile-menu)
+{
+  writing-mode: vertical-lr;
+  text-orientation: mixed;
+}
+
+/* Existing Japanese vertical decorations must also advance to the right. */
+html:lang(mn-Mong) [style*='writing-mode']
+{
+  writing-mode: vertical-lr !important;
+}
+
 [data-vertical-preview]
 {
   min-width: 0;
@@ -703,11 +723,11 @@ body
   max-inline-size: 100%;
 }
 
-/* Input and data widgets keep their physical coordinates and nested scrolling. */
+/* Input and data widgets retain nested scrolling in the vertical text flow. */
 [data-vertical-preview] .main-area[data-vertical-content] :is(
     form, .form-layout, pre, .overflow-x-auto, .rc-md-editor, .not-prose)
 {
-  writing-mode: horizontal-tb;
+  writing-mode: vertical-lr;
   text-orientation: mixed;
   max-height: 100%;
   overflow: auto;
@@ -715,13 +735,14 @@ body
 
 [data-vertical-preview] .main-area[data-vertical-content] :is(form, .form-layout)
 {
-  width: min(36rem, calc(100vw - 2rem));
+  width: auto;
+  inline-size: min(36rem, 100%);
 }
 
 [data-vertical-preview] :where(.main-area[data-vertical-content]) :is(
-    button, input, select, textarea, code, time, table, img, video, iframe, canvas, svg)
+    button, input, select, textarea, code, time, table)
 {
-  writing-mode: horizontal-tb;
+  writing-mode: vertical-lr;
 }
 
 [data-vertical-preview] .main-area[data-vertical-content] :is(img, video, iframe, canvas)
@@ -880,7 +901,7 @@ body
   flex: none;
   align-self: flex-start;
   margin: 0;
-  writing-mode: horizontal-tb;
+  writing-mode: vertical-lr;
 }
 
 [data-vertical-preview] .tags-main-area
@@ -957,7 +978,7 @@ body
 [data-vertical-preview] .tag-list-table td:nth-child(2),
 [data-vertical-preview] .tag-list-table time
 {
-  writing-mode: horizontal-tb;
+  writing-mode: vertical-lr;
   white-space: nowrap;
 }
 
@@ -993,7 +1014,7 @@ body
 
 [data-vertical-preview] .wiki-main-area > div > span
 {
-  writing-mode: horizontal-tb;
+  writing-mode: vertical-lr;
 }
 
 [data-vertical-preview] .wiki-main-area article,
@@ -1037,7 +1058,7 @@ body
 [data-vertical-preview] .wiki-main-area article :is(pre, table, .not-prose),
 [data-vertical-preview] .main-area[data-vertical-content] :is(code, time, input, select, textarea)
 {
-  writing-mode: horizontal-tb;
+  writing-mode: vertical-lr;
   text-orientation: mixed;
 }
 
@@ -1166,7 +1187,7 @@ body
   [data-vertical-preview] .top-nav-locale-name
   {
     display: inline;
-    writing-mode: horizontal-tb;
+    writing-mode: vertical-lr;
   }
 
   [data-vertical-preview] .top-nav-desktop-submenu