Conversation
why: Exploring a compact badge variant for dense inline prose where
the full {tool} badge is too wide and {toolref} has no visual tier
indicator at all.
what:
- Add {toolicon} role: code-linked tool name with square icon-only
badge positioned to the left of the <code> element
- Badge is 14x14px square with 3px border-radius, emoji only, no text
- CSS: .sd-badge.icon-only with fixed pixel sizing for crisp rendering
- Added to demo page for visual testing
- WIP: vertical alignment and sizing still being refined
why: Need to test all icon-badge positions to find the best visual fit.
what:
- {tooliconl}: icon left, outside code — [🔍] `capture_pane`
- {tooliconr}: icon right, outside code — `capture_pane` [🔍]
- {tooliconil}: icon inline-left, inside code — `[🔍]capture_pane`
- {tooliconir}: icon inline-right, inside code — `capture_pane[🔍]`
- {toolicon} remains as alias for {tooliconl}
- Factory function _make_toolicon_role creates role variants
- CSS: .icon-only-inline for inside-code variants (tighter margins)
- Demo page shows all 4 variants side by side
why: 14px colored square was too heavy — emoji alone carries the tier signal. Inline variants had invisible icons (font-size: 0.8em of 0 = 0). what: - Remove background, border, fixed dimensions from .sd-badge.icon-only - Bare emoji with opacity: 0.88, no containment box - Fix inline ::before to use 0.8rem (absolute) not 0.8em (relative to 0) - Inline variants use vertical-align: middle - Tighter margins: 0.2em outside, 0.15em inside code
why: Expert feedback identified outside icons as too heavy, vertical alignment too aggressive, inside spacing too loose, and bomb emoji carrying more visual mass than the other glyphs. what: - Outside variants: 0.72rem (was 0.85rem), vertical-align -0.06em (was -0.15em) - Inside variants: 0.78rem, vertical-align -0.01em, margins 0.12em (was 0.15em) - Right-side variants get tighter gap than left (asymmetric: suffix needs less space) - Bomb emoji (💣): slightly smaller and lower opacity than 🔍/✏️ - display: block on ::before for consistent line-height clipping
…font-size:0 why: .sd-badge.icon-only has font-size:0 to hide text. Margins in em units (0.25em, 0.15em) resolved to 0px since em is relative to the element's own font-size. Discovered via Playwright computed style audit. what: - Switch outside variant margins to fixed px (5px right, 4px left) - Restore colored square box for tooliconl/tooliconr (was bare emoji) - Keep bare emoji for tooliconil/tooliconir (inside code, no box)
Codecov Report❌ Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #4 +/- ##
==========================================
- Coverage 73.01% 71.15% -1.86%
==========================================
Files 20 20
Lines 1371 1418 +47
Branches 175 186 +11
==========================================
+ Hits 1001 1009 +8
- Misses 325 364 +39
Partials 45 45 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
why: Verified via Playwright that tooliconl had 5px gap while tooliconr had 4px. The asymmetry was visually noticeable. what: - .sd-badge.icon-only margin-right: 5px → 3px - tooliconl now 3px, tooliconr remains 4px (close and balanced)
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
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
Add
{toolicon}role family for icon-only tool cross-references — bare emoji glyphs that act as lightweight semantic marks without the full badge.Four placement variants
{tooliconl}{tooliconr}{tooliconil}{tooliconir}Design
WIP
Still iterating on optical refinements. Not ready for merge — keeping as draft for visual review.
Test plan
just build-docs— builds without new warningsuv run ruff check . && uv run mypy && uv run pytest -q— all pass