Add tag display mode toggle for full hierarchical view #4493
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Adds an eye icon button in the tag editor that toggles between: - Auto mode: current behavior, shortens tags when >2 rows - Full mode: shows complete tag names, one per row, max 50vh with scroll Features: - Middle truncation for long tags that adapts to editor width - Keyboard shortcut: Ctrl+. - Setting persists via collection config Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add mousedown preventDefault on toggle button to prevent input blur - Add end-0 to TagInput for proper width in full mode - Add consistent min-height for tag rows and spacer using font-size calc - Hide spacer when editing to prevent layout shift Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Extract tagDisplayModeShortcut constant to single source of truth - Pass shortcut to TagDisplayModeButton for tooltip display - Rename PADDING_PX to RIGHT_PADDING_PX with detailed comment - Add overflow-x: hidden to prevent horizontal scrollbar in full mode Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Track new tag by ID (newTagId) instead of boolean flag for robustness - Spacer only collapses when adding new tag at end, not when editing existing - Auto-delete empty tags when navigating away (blur handler handles deletion) - Prevent creating duplicate empty tags when pressing Enter on empty field - Simplify logic: set newTagId in appendTagAndFocusAt, clear in on:tagedit Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
When switching from full mode back to auto mode, tags were incorrectly shortened because the layout measurement happened before the browser completed CSS layout changes. Now we wait for the browser to finish layout (using double requestAnimationFrame) before measuring row count. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
…ange/anki into tag-display-mode-toggle
abdnh
approved these changes
Jan 14, 2026
Collaborator
abdnh
left a comment
abdnh
left a comment
There was a problem hiding this comment.
This is working very well. The tooltip/ellipsis check looks complicated; I've not found any issues with it, though. I think it would be nice to make the tags field resizable, but that's maybe better left for another time.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Adds a tag display mode toggle to the note editor that allows switching between auto and full-tag views.
Auto mode (default): Current behavior - shortens hierarchical tags (e.g.,
...::subtopic) when there are more than 2 rows of tags.Full mode: Shows complete tag names with middle truncation for long tags, one tag per row, with a maximum height of 50vh and vertical scrolling.
Motivation
Users working with many hierarchical tags struggle with the current auto-shortening behavior that truncates tags to
...::subtag. They have to hover over each tag individually to see the full path, which is tedious and straining.AnKing deck maintainers, who often work with notes that have ~10 long tags, described it as "losing their eyesight" hovering over tags one by one. I made an add-on implementing similar functionality and they liked it a lot.
This was also requested on the forum. The toggle allows users who need full visibility to enable it, while preserving the compact default for those with fewer/shorter tags.
I can release this as an add-on if it doesn't fit upstream, but wanted to see what you think about adding it to Anki first.
Features
view_compact/view_listiconsCtrl+.very-long-tag-name→very-...name)tagDisplayFull)Technical Details
Middle Truncation
Layout Stability
calc(var(--font-size, 15px) * 1.5 + 2px)mousedown|preventDefaultto prevent input blurMode Switch Handling
requestAnimationFrameto ensure CSS changes are applied before measuringScreenshots and video
Button tooltips
Video
2026-01-10.14-28-15.mp4
Test Plan
subject::topic::subtopic)Ctrl+.keyboard shortcut works🤖 Generated with Claude Code