WIP: preserve PR #475 changes before test fixes

frontend/src/components/TagLink.tsx

@@ -158,7 +158,7 @@ const TagLink: FC<Props> = ({ tag,
 	    <span
 		className="ms-1 me-1 shrink-0"
 		style={{ paddingInlineStart: `${ (nestLevel - 1) }rem` }}>
-	      ↳
+	      <span className="tag-tree-arrow">↳</span>
 	    </span>)}
 	{matchedAlias != null && (
 	    <>

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

frontend/src/pages/posts/PostImportReviewPage.tsx

@@ -1061,7 +1061,7 @@ const PostImportReviewPage: FC<Props> = ({ user }) => {
       <>
 	<PageHead title={message ('review.title')}/>
 
-	<MainArea className="pb-40">
+	<MainArea className="post-import-review pb-40">
 	  <div className="mx-auto max-w-6xl space-y-6">
 	    <PageTitle>{label ('review.title')}</PageTitle>
 
@@ -1164,8 +1164,9 @@ const PostImportFooter = (
   const { label } = useUITranslation ('imports')
   return (
       <div
-	  className="shrink-0 border-t bg-white/95 p-4 backdrop-blur
-		     dark:border-neutral-700 dark:bg-neutral-950/95">
+	  className="post-import-footer shrink-0 border-t bg-white/95 p-4 backdrop-blur
+		     text-neutral-950 dark:border-neutral-700 dark:bg-neutral-950/95
+		     dark:text-neutral-50">
 	<div className="mx-auto flex max-w-6xl flex-col gap-3 md:flex-row
 			md:items-center md:justify-between">
 	  <div className="flex flex-wrap items-center gap-2 text-sm">

frontend/src/pages/posts/PostImportSourcePage.tsx

@@ -130,7 +130,7 @@ const PostImportSourcePage: FC<Props> = ({ user }) => {
       <MainArea>
 	<PageHead title={uiMessage ('source.title')}/>
 
-	<Form className="max-w-4xl">
+	<Form className="post-import-source max-w-4xl">
 	  <PageTitle>{label ('source.title')}</PageTitle>
 	  <FormField label={label ('source.urls')}>
 	    {() => (

frontend/src/pages/posts/PostSearchPage.tsx

@@ -250,7 +250,7 @@ const PostSearchPage: FC = () => {
 	    </label>
 	  </div>
 
-	  <form onSubmit={handleSearch} className="space-y-2">
+	  <form onSubmit={handleSearch} className="post-search-form space-y-2">
 	    {/* タイトル */}
 	    <FormField label={label ('shared:labels.title')}>
 	      {({ invalid }) => (