AI: address review on PR #475

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