AI: address review on PR #475

frontend/src/components/TagSearch.tsx

@@ -3,7 +3,7 @@
 import { useEffect, useRef, useState } from 'react'
 import { useLocation } from 'react-router-dom'
 
-import { useLocale, useLocaleNavigate } from '@/lib/useLocale'
+import { useLocale, useLocaleNavigate, useVerticalPreview } from '@/lib/useLocale'
 import { useUITranslation } from '@/lib/useUITranslation'
 import { apiGet } from '@/lib/api'
 import { inputClass } from '@/lib/utils'
@@ -18,6 +18,7 @@ import type { Tag } from '@/types'
 const TagSearch: FC = () => {
   const { message } = useUITranslation ('shared')
   const locale = useLocale ()
+  const verticalPreview = useVerticalPreview ()
   const location = useLocation ()
   const navigate = useLocaleNavigate ()
   const compositionFlgRef = useRef (false)
@@ -105,13 +106,13 @@ const TagSearch: FC = () => {
 
     switch (ev.key)
     {
-    case 'ArrowDown':
+    case verticalPreview ? 'ArrowRight' : 'ArrowDown':
       ev.preventDefault ()
       setActiveIndex (i => Math.min (i + 1, suggestions.length - 1))
       setSuggestionsVsbl (true)
       break
 
-    case 'ArrowUp':
+    case verticalPreview ? 'ArrowLeft' : 'ArrowUp':
       ev.preventDefault ()
       setActiveIndex (i => Math.max (i - 1, -1))
       setSuggestionsVsbl (true)

frontend/src/components/TagSearchBox.tsx

@@ -15,7 +15,7 @@ const TagSearchBox: FC<Props> = ({ suggestions, activeIndex, onSelect }) => {
     return
 
   return (
-      <ul className="absolute left-0 right-0 z-50 w-full
+      <ul className="tag-search-suggestions absolute left-0 right-0 z-50 w-full
 		     bg-gray-100 dark:bg-gray-800 border dark:border-gray-600
 		     rounded shadow">
 	{suggestions.map ((tag, i) => (

frontend/src/index.css

@@ -756,9 +756,9 @@ body
 
 [data-vertical-preview] .sidebar > form
 {
-  display: flex;
-  align-items: flex-start;
-  gap: .5rem;
+  writing-mode: vertical-lr;
+  text-orientation: mixed;
+  display: block;
   width: auto;
   height: 100%;
 }
@@ -773,15 +773,16 @@ body
   padding: .75rem .5rem;
 }
 
-[data-vertical-preview] .sidebar > form > ul
+[data-vertical-preview] .sidebar > form > .tag-search-suggestions
 {
-  position: relative;
-  left: auto;
-  right: auto;
-  flex-shrink: 0;
-  width: min(16rem, 75vw);
-  max-height: 100%;
-  overflow-y: auto;
+  inset: auto;
+  inset-inline-start: 0;
+  inset-block-start: 100%;
+  width: auto;
+  inline-size: 100%;
+  max-block-size: min(16rem, 75vw);
+  margin: 0;
+  overflow: auto;
 }
 
 [data-vertical-preview] .sidebar > div
@@ -1176,18 +1177,36 @@ body
 
   [data-vertical-preview] .top-nav-submenu-content
   {
+    writing-mode: vertical-lr;
+    text-orientation: mixed;
     width: max-content;
     max-width: 35vw;
     height: 100%;
-    overflow-y: auto;
-    overflow-x: hidden;
+    overflow-x: auto;
+    overflow-y: hidden;
+  }
+
+  [data-vertical-preview] .top-nav-submenu-content:not(.top-nav-more-menu) > div
+  {
+    height: 100%;
   }
 
   [data-vertical-preview] :is(.top-nav-submenu-items, .top-nav-more-links)
   {
-    flex-direction: column;
-    flex-wrap: nowrap;
+    flex-direction: row;
+    flex-wrap: wrap;
     align-items: stretch;
+    max-height: 100%;
+    padding-inline: .75rem;
+    padding-block: 0;
+  }
+
+  [data-vertical-preview] .top-nav-desktop-submenu .top-nav-menu-link
+  {
+    min-height: 0;
+    min-width: 40px;
+    padding-inline: .75rem;
+    padding-block: .5rem;
   }
 
   [data-vertical-preview] .top-nav-submenu-items .top-nav-menu-link