@hanology/cham-browser 0.4.20 → 0.4.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanology/cham-browser",
-  "version": "0.4.20",
+  "version": "0.4.22",
   "description": "CHAM — browser-compatible parser, serializer, and site generator for Classical Han Annotated Markdown",
   "type": "module",
   "main": "dist/index.js",

package/template/src/components/AnnotationTooltip.vue

@@ -414,27 +414,36 @@ onBeforeUnmount(() => {
 .ann-card.vertical {
   writing-mode: vertical-rl;
   text-orientation: mixed;
-  flex-direction: row;
+  flex-direction: column;
+  overflow-y: hidden;
+  overflow-x: hidden;
 }
 
 .ann-card.vertical .ann-card-head {
   padding: 10px 6px;
+  border-bottom: none;
+  border-left: 1px solid var(--border-light);
 }
 
 .ann-card.vertical .ann-card-scroll {
   display: flex;
-  flex-direction: row;
-  padding: 8px 6px;
-  overflow-y: auto;
+  flex-direction: column;
+  padding: 8px 0;
+  overflow-x: auto;
+  overflow-y: hidden;
 }
 
 .ann-card.vertical .ann-entry {
+  flex-shrink: 0;
   border-bottom: none;
-  padding: 8px 0;
+  padding: 0 10px;
+  border-right: 1px solid var(--border-light);
+  max-height: inherit;
+  overflow-y: hidden;
 }
 
-.ann-card.vertical .ann-entry + .ann-entry {
-  border-top: 1px solid var(--border-light);
+.ann-card.vertical .ann-entry:first-child {
+  border-right: none;
 }
 
 .ann-card.vertical .ann-card-close {

package/template/src/composables/useAnnotationRenderer.ts

@@ -160,8 +160,8 @@ export function useAnnotationTooltip() {
         bottom: '0',
       }
     } else if (layout.value === 'vertical') {
-      // Vertical mode: tall narrow card to the left of the annotation
-      const cardW = 180
+      // Vertical mode: wide card with multi-column layout to the left
+      const cardW = 260
       const cardH = Math.min(vh - 16, 480)
       const gap = 12
       let left = Math.max(8, rect.left - cardW - gap)
@@ -200,7 +200,7 @@ export function useAnnotationTooltip() {
     visible.value = true
   }
 
-  function hide() { visible.value = false; headword.value = '' }
+  function hide() { visible.value = false }
   function toggle(event: MouseEvent, annotations: Annotation[]) {
     if (visible.value) {
       const currentIds = items.value.map(a => a.id).sort().join(',')