A dark vertical popover that opens from a trigger, offering highlight color swatches and action items with vertical Korean labels. Scales in from its trigger origin, collapses on close.

Design question

How should a contextual popover menu orient and animate in a vertical reading interface? Horizontal toolbars break the reading flow, and a menu that scales from center feels disconnected from the trigger.

Decision

The menu reads top-to-bottom · matching the reading axis it serves. Highlight swatches at the top, labeled actions below. Icons sit above their vertical labels. It opens from a compact trigger and collapses back to it.

Default

Tap the menu icon to open the menu, then × in the corner to collapse it. A row of highlight swatches, then action buttons labelled in vertical Korean · a compact, near-square menu that keeps the reading axis in the labels.

tsx
1function VerseActionBar({ onHighlight, onSave, onNote, onCopy }) {
2  const COLORS = [
3    { id: "yellow", color: "#FFD166" },
4    { id: "green",  color: "#44CF7A" },
5    { id: "blue",   color: "#60A5FA" },
6    { id: "pink",   color: "#F472B6" },
7  ]
8

Guidance

Arrange actions top-to-bottom matching the vertical reading axis
Place highlight swatches at the top · they're the most frequent action
Use vertical Korean labels (저장, 노트, 복사) below each icon
Scale the menu in from its trigger, not from the viewport center

Don't

Use a horizontal toolbar · it forces the user's eye off the reading axis
Label actions with horizontal text in a vertical reading context
Place the menu on the reading axis · it should sit at the edge of the selected column

Accessibility

Trigger is a labeled button; the open menu is role='toolbar', aria-label='구절 동작'. Each button has aria-label. Keyboard: arrow keys navigate within the menu, Escape collapses it.

Open question

When the selected verse is in the leftmost column (reading terminus), where does the popover go? It can't extend further left.

PreviousVerse Next Hyperlink Treatment

1	function VerseActionBar({ onHighlight, onSave, onNote, onCopy }) {
2	const COLORS = [
3	{ id: "yellow", color: "#FFD166" },
4	{ id: "green", color: "#44CF7A" },
5	{ id: "blue", color: "#60A5FA" },
6	{ id: "pink", color: "#F472B6" },
7	]
8