WIP: preserve PR #475 changes before test fixes

frontend/src/index.css

@@ -763,6 +763,107 @@ html:lang(mn-Mong) .text-right
   object-fit: contain;
 }
 
+/* Keep the URL source horizontal even in the vertical page flow. */
+[data-vertical-preview] .main-area[data-vertical-content] .post-import-source textarea
+{
+  writing-mode: horizontal-tb;
+  width: min(36rem, 65vw);
+  height: min(32rem, 70dvh);
+  inline-size: min(36rem, 65vw);
+  block-size: min(32rem, 70dvh);
+}
+
+[data-vertical-preview] .main-area .post-search-form
+{
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 1rem;
+  inline-size: 100%;
+}
+
+[data-vertical-preview] .post-search-form > :not([hidden])
+{
+  flex: none;
+  margin: 0;
+  width: auto;
+}
+
+[data-vertical-preview] .post-search-form label.block
+{
+  margin: 0;
+  margin-block-end: .5rem;
+}
+
+[data-vertical-preview] .post-search-form input[type='text']
+{
+  width: auto;
+  inline-size: min(24rem, 100%);
+}
+
+[data-vertical-preview] .post-search-form fieldset
+{
+  width: auto;
+  margin: 0;
+}
+
+[data-vertical-preview] .post-search-form input[type='datetime-local']
+{
+  inline-size: 13rem;
+}
+
+[data-vertical-preview] .main-area.post-import-review
+{
+  padding-bottom: 1rem;
+}
+
+[data-vertical-preview] .post-import-review :is(.space-y-6, .space-y-3) > *
+{
+  margin-top: 0;
+  margin-bottom: 0;
+  margin-block-end: 1rem;
+}
+
+[data-vertical-preview] > .post-import-footer
+{
+  flex: none;
+  writing-mode: vertical-lr;
+  overflow: auto;
+  border-top: 0;
+  border-left-width: 1px;
+}
+
+[data-vertical-preview] .post-import-footer > div
+{
+  height: 100%;
+  max-width: none;
+  flex-direction: column;
+  align-items: stretch;
+}
+
+[data-vertical-preview] .post-import-footer > div > :first-child
+{
+  align-items: flex-start;
+}
+
+[data-vertical-preview] .post-import-footer > div > :last-child
+{
+  flex-direction: row-reverse;
+  justify-content: space-between;
+}
+
+[data-vertical-preview] .post-import-footer button
+{
+  width: auto;
+}
+
+[data-vertical-preview] .tag-tree-arrow
+{
+  display: inline-block;
+  writing-mode: horizontal-tb;
+  transform: rotate(-90deg) scaleX(-1);
+}
+
 [data-vertical-preview] .sidebar-panel
 {
   width: 100%;
@@ -771,12 +872,14 @@ html:lang(mn-Mong) .text-right
   flex: none;
 }
 
+/* Mirror the scroll box and its contents to put its scrollbar above the tags. */
 [data-vertical-preview] .sidebar
 {
   display: flex;
-  align-items: flex-start;
+  align-items: flex-end;
   gap: 1rem;
   direction: ltr;
+  transform: scaleY(-1);
   overflow-x: auto;
   overflow-y: hidden;
   overscroll-behavior: contain;
@@ -785,6 +888,7 @@ html:lang(mn-Mong) .text-right
 [data-vertical-preview] .sidebar > *
 {
   flex-shrink: 0;
+  transform: scaleY(-1);
 }
 
 [data-vertical-preview] .sidebar > form
@@ -1122,7 +1226,6 @@ html:lang(mn-Mong) .text-right
   {
     display: flex;
     width: max-content;
-    max-width: 50vw;
     height: 100%;
   }
 
@@ -1132,7 +1235,7 @@ html:lang(mn-Mong) .text-right
     flex: none;
     width: 3.5rem;
     height: 100%;
-    padding: .5rem;
+    padding: .5rem 0;
     gap: .5rem;
   }
 
@@ -1143,7 +1246,7 @@ html:lang(mn-Mong) .text-right
     min-height: 0;
     width: 100%;
     height: auto;
-    overflow-y: auto;
+    overflow: hidden;
   }
 
   [data-vertical-preview] .top-nav-brand-link
@@ -1221,10 +1324,8 @@ html:lang(mn-Mong) .text-right
     writing-mode: vertical-lr;
     text-orientation: mixed;
     width: max-content;
-    max-width: 35vw;
     height: 100%;
-    overflow-x: auto;
-    overflow-y: hidden;
+    overflow: visible;
   }
 
   [data-vertical-preview] .top-nav-submenu-content:not(.top-nav-more-menu) > div