style(docs): polish sidebar, header, focus, and code block UX by sergical · Pull Request #580 · getsentry/cli

sergical · 2026-03-26T20:37:25Z

Summary

Sidebar: purple highlight on active/hover, removed left border
Header: full-width on docs pages, constrained on homepage; Docs link non-clickable on docs pages
Focus: strip Starlight's background-color changes on :focus, show only purple outline on :focus-visible
Skip to content: purple background on focus
Code blocks: reduced header padding, copy button focus ring wraps icon only
PackageManagerCode: "Copied!" text positioned absolutely so it doesn't inflate button size

Test plan

bun run build passes (23 pages)
Visual: sidebar active item is purple bg, no left border
Visual: tab through page shows purple outline, no dark bg flash
Visual: copy button focus ring wraps just the icon
Visual: header full-width on docs, constrained on homepage

🤖 Generated with Claude Code

- Sidebar: purple highlight on active/hover, remove left border - Header: full-width on docs pages, constrained on homepage - Header: Docs link non-clickable when already on docs pages - Focus: strip background-color changes on focus, only show purple outline ring on keyboard focus-visible - Skip to content: purple background on focus - Code blocks: reduce header padding for less dead space - Copy button: focus ring tightly wraps icon only (Copied! text positioned absolutely so it doesn't inflate button size) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

github-actions · 2026-03-26T20:37:43Z

Semver Impact of This PR

🟢 Patch (bug fixes)

📋 Changelog Preview

This is how your changes will appear in the changelog.
Entries from this PR are highlighted with a left border (blockquote style).

New Features ✨

Dashboard

Add pagination and glob filtering to dashboard list by BYK in #560
Add a full chart rendering engine for sentry dashboard view that transforms widget data into rich terminal visualizations. by BYK in #555

Init

Propagate sentry-trace headers to wizard API calls by betegon in #567
Treat bare slug as new project name when not found by BYK in #554

Other

(formatters) Colorize SQL in DB span descriptions by BYK in #546
(output) Add Zod schema registration to OutputConfig for self-documenting JSON fields by BYK in #582
(telemetry) Report unknown commands to Sentry by BYK in #563
Bidirectional cursor pagination (-c next / -c prev) by BYK in #564
Add sentry sourcemap inject and sentry sourcemap upload commands by BYK in #547
Native debug ID injection and sourcemap upload by BYK in #543

Bug Fixes 🐛

Dashboard

Validate display types against all datasets by betegon in #577
Auto-clamp widget limit instead of erroring by BYK in #573
Default issue dataset table columns to ["issue"] by betegon in #570
Scale timeseries bar width to fill chart area by BYK in #562
Resolve dashboard by ID/slug in addition to title by BYK in #559

Event

Detect SHORT-ID/EVENT-ID format in event view by BYK in #574
Auto-fallback to org-wide search when event 404s in project by BYK in #575

Other

(api) Show meaningful message for network errors instead of '0 Unknown' by BYK in #572
(event-view) Auto-redirect issue short IDs in two-arg form (CLI-MP) by BYK in #558
(help) Show help when user passes help as positional arg by BYK in #561
(issue) Auto-redirect bare org slug to org-all mode in issue list by BYK in #576
Reject @-selectors in parseOrgProjectArg with helpful redirect by BYK in #557

Internal Changes 🔧

Coverage

Use informational-patch input instead of sed hack by BYK in #544
Make checks informational on release branches by BYK in #541

Event

Replace "latest" magic string with @latest sentinel constant by BYK in #583
Deduplicate span tree building into shared helper by BYK in #581

Other

(api) Collapse stats on issue detail endpoints to save 100-300ms by BYK in #551
(ci) Upgrade GitHub Actions to Node 24 runtime by BYK in #542
(db) DRY up database layer with shared helpers and lint enforcement by BYK in #550

(docs) Polish sidebar, header, focus, and code block UX by sergical in #580

(issue-list) Use collapse parameter to skip unused Snuba queries by BYK in #545
Bump Bun from 1.3.9 to 1.3.11 by BYK in #552
Regenerate skill files by github-actions[bot] in ec1ffe28

_{🤖 This preview updates automatically when you update the PR.}

github-actions · 2026-03-26T20:37:54Z

PR Preview Action v1.8.1
🚀 View preview at https://cli.sentry.dev/pr-preview/pr-580/
Built to branch `gh-pages` at 2026-03-26 22:25 UTC. Preview will be ready when the GitHub Pages deployment is complete.

github-actions · 2026-03-26T20:39:06Z

Codecov Results 📊

✅ 126 passed | Total: 126 | Pass Rate: 100% | Execution Time: 0ms

📊 Comparison with Base Branch

Metric	Change
Total Tests	—
Passed Tests	—
Failed Tests	—
Skipped Tests	—

✨ No test changes detected

All tests are passing successfully.

✅ Patch coverage is 100.00%. Project has 1276 uncovered lines.
❌ Project coverage is 95.48%. Comparing base (base) to head (head).

Coverage diff

@@            Coverage Diff             @@
##          main       #PR       +/-##
==========================================
- Coverage    95.49%    95.48%    -0.01%
==========================================
  Files          194       194         —
  Lines        28245     28245         —
  Branches         0         0         —
==========================================
+ Hits         26973     26969        -4
- Misses        1272      1276        +4
- Partials         0         0         —

Generated by Codecov Action

docs/src/styles/custom.css

The global :focus { background-color: inherit !important } rule was stripping backgrounds from all focused elements — including the sidebar active link's purple background, the hamburger menu button, and search button. Since !important always beats non-!important regardless of specificity, this directly contradicted the PR's intent. Keep only outline: none to suppress Starlight's default focus outline. The :focus-visible rule below provides the purple outline for keyboard users. Element backgrounds are now preserved during focus/click. Addresses Cursor BugBot review finding.

Define --sl-color-accent-rgb (139 92 246) alongside --sl-color-accent and replace all 12 hardcoded rgba(139, 92, 246, ...) occurrences with rgb(var(--sl-color-accent-rgb) / alpha). This makes the accent color a single source of truth across custom.css, PackageManagerCode.astro, and Terminal.astro.

BYK

LGTM — two follow-up commits pushed:

fix(docs): Removed the global :focus { background-color: inherit !important } that was stripping backgrounds from the sidebar active link and other interactive elements on focus (Cursor BugBot finding).
refactor(docs): Extracted rgba(139, 92, 246, ...) into --sl-color-accent-rgb CSS custom property — replaced all 12 occurrences across custom.css, PackageManagerCode.astro, and Terminal.astro.

Build passes (23 pages). Ready to merge.

cursor

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

cursor · 2026-03-26T22:33:25Z

docs/src/components/PackageManagerCode.astro

    margin: 1rem 0;
    background: rgba(255, 255, 255, 0.04);
-    padding: 0.5rem;
+    padding: 0 0.5rem 0.5rem;


Copy button focus outline clipped by container overflow

Low Severity

The top padding of .pm-code was removed (changed from 0.5rem to 0 0.5rem 0.5rem), but the container still has overflow: hidden. The .pm-copy button sits flush against the top of the container, and its :focus-visible outline (2px width + 2px outline-offset = 4px extension) extends above the container's padding box and gets clipped. The previous 0.5rem (~8px) top padding provided enough room; the new 0 top padding does not.

Additional Locations (1)

docs/src/components/PackageManagerCode.astro#L104-L110

sergical marked this pull request as ready for review March 26, 2026 20:42

cursor bot reviewed Mar 26, 2026

View reviewed changes

docs/src/styles/custom.css Show resolved Hide resolved

BYK added 2 commits March 26, 2026 22:23

BYK approved these changes Mar 26, 2026

View reviewed changes

BYK merged commit fbda58d into main Mar 26, 2026
23 checks passed

BYK deleted the docs/ux-polish branch March 26, 2026 22:30

cursor bot reviewed Mar 26, 2026

View reviewed changes

sentry-release-bot bot mentioned this pull request Mar 27, 2026

publish: getsentry/cli@0.21.0 getsentry/publish#7604

Closed

5 tasks

Uh oh!

Conversation

sergical commented Mar 26, 2026

Summary

Test plan

Uh oh!

github-actions bot commented Mar 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Semver Impact of This PR

New Features ✨

Dashboard

Init

Other

Bug Fixes 🐛

Dashboard

Event

Other

Internal Changes 🔧

Coverage

Event

Other

Uh oh!

github-actions bot commented Mar 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Built to branch gh-pages at 2026-03-26 22:25 UTC. Preview will be ready when the GitHub Pages deployment is complete.

Uh oh!

github-actions bot commented Mar 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Results 📊

📊 Comparison with Base Branch

Uh oh!

Uh oh!

BYK left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

cursor bot left a comment

Choose a reason for hiding this comment

Uh oh!

cursor bot Mar 26, 2026

Choose a reason for hiding this comment

Copy button focus outline clipped by container overflow

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

github-actions bot commented Mar 26, 2026 •

edited

Loading

github-actions bot commented Mar 26, 2026 •

edited

Loading

Built to branch `gh-pages` at 2026-03-26 22:25 UTC.
Preview will be ready when the GitHub Pages deployment is complete.

github-actions bot commented Mar 26, 2026 •

edited

Loading