@hanology/cham-browser 0.4.19 → 0.4.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanology/cham-browser",
-  "version": "0.4.19",
+  "version": "0.4.21",
   "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,32 @@ onBeforeUnmount(() => {
 .ann-card.vertical {
   writing-mode: vertical-rl;
   text-orientation: mixed;
-  flex-direction: row;
+  flex-direction: column;
 }
 
 .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);
 }
 
-.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 {
@@ -466,21 +471,27 @@ onBeforeUnmount(() => {
   writing-mode: horizontal-tb;
 }
 
+.ann-sheet.vertical .ann-sheet-head {
+  writing-mode: horizontal-tb;
+}
+
 .ann-sheet.vertical .ann-sheet-scroll {
   display: flex;
-  flex-direction: row;
-  overflow-y: auto;
-  overflow-x: hidden;
-  padding: 4px 16px 24px;
+  flex-direction: column;
+  overflow-x: auto;
+  overflow-y: hidden;
+  padding: 8px 0 24px;
 }
 
 .ann-sheet.vertical .ann-entry {
+  flex-shrink: 0;
   border-bottom: none;
-  padding: 8px 0;
+  padding: 0 14px;
+  border-right: 1px solid var(--border-light);
 }
 
-.ann-sheet.vertical .ann-entry + .ann-entry {
-  border-top: 1px solid var(--border-light);
+.ann-sheet.vertical .ann-entry:first-child {
+  border-right: none;
 }
 
 .ann-sheet.vertical .ann-pron-h {

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)