fix(docs): Mobile styling improvements for landing page by betegon · Pull Request #106 · getsentry/cli

betegon · 2026-01-29T15:48:24Z

Summary

Fix mobile "On this page" TOC summary displaying with white background in light mode
Make search bar compact (icon-only) on mobile screens instead of full-width
Style hamburger menu button for dark theme visibility
Force dark theme on all Starlight components regardless of system preference

Changes

Mobile TOC Summary: Added CSS to force dark background and white text on the mobile table of contents summary element
Mobile Search Bar: Reset fixed positioning and width on mobile, hide text/kbd shortcut to show only icon
Hamburger Menu: Added dark theme styling to ensure visibility on dark background
ThemeProvider: New component to force dark mode and prevent light mode from system preference

Test plan

View docs site on mobile (375px width)
Verify "On this page" button has dark background with readable white text
Verify search bar shows as compact icon on mobile
Verify hamburger menu is visible and functional
Test with system in light mode to ensure dark theme is enforced

- Add border to feature visuals for better definition at all sizes - Add padding to feature-visual for consistent margins around terminals - Fix main terminal bleeding to edges on mobile (keep border-radius) - Add mobile breakpoints for FeatureTerminal component - Add 480px breakpoint for smaller mobile devices Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

The mobile "On this page" summary element was displaying with a white background when the user's system was in light mode, making text unreadable. Added CSS rules to directly target the summary element and force dark styling regardless of system preference.

- Make search bar compact (icon-only) on mobile screens - Style hamburger menu button for dark theme visibility - Increase header background opacity for better readability

github-actions · 2026-01-29T15:48:47Z

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 ✨

Add global help command using Stricli's defaultCommand by BYK in #104

Bug Fixes 🐛

(docs) Mobile styling improvements for landing page by betegon in #106

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

github-actions · 2026-01-29T15:48:49Z

Codecov Results 📊

✅ Patch coverage is 100.00%. Project has 1756 uncovered lines.
✅ Project coverage is 66.66%. Comparing base (base) to head (head).

Files with missing lines (24)

File	Patch %	Lines
`human.ts`	30.83%	⚠️ 673 Missing
`resolve-target.ts`	18.93%	⚠️ 257 Missing
`oauth.ts`	21.71%	⚠️ 202 Missing
`resolver.ts`	3.23%	⚠️ 120 Missing
`errors.ts`	5.94%	⚠️ 95 Missing
`api-client.ts`	68.77%	⚠️ 94 Missing
`migration.ts`	47.44%	⚠️ 82 Missing
`api.ts`	89.80%	⚠️ 47 Missing
`seer.ts`	75.54%	⚠️ 45 Missing
`errors.ts`	73.17%	⚠️ 33 Missing
`seer.ts`	76.15%	⚠️ 31 Missing
`preload.ts`	39.02%	⚠️ 25 Missing
`detector.ts`	87.79%	⚠️ 16 Missing
`telemetry.ts`	89.87%	⚠️ 8 Missing
`auth.ts`	93.69%	⚠️ 7 Missing
`index.ts`	95.06%	⚠️ 4 Missing
`colors.ts`	91.84%	⚠️ 4 Missing
`env-file.ts`	97.17%	⚠️ 3 Missing
`utils.ts`	98.64%	⚠️ 2 Missing
`alias.ts`	98.56%	⚠️ 2 Missing
`project-aliases.ts`	97.40%	⚠️ 2 Missing
`schema.ts`	90.00%	⚠️ 2 Missing
`java.ts`	97.22%	⚠️ 1 Missing
`parser.ts`	98.63%	⚠️ 1 Missing

Coverage diff

@@            Coverage Diff             @@
##          main       #PR       +/-##
==========================================
+ Coverage    66.66%    66.66%        —%
==========================================
  Files           45        45         —
  Lines         5267      5267         —
  Branches         0         0         —
==========================================
+ Hits          3511      3511         —
- Misses        1756      1756         —
- Partials         0         0         —

Generated by Codecov Action

github-actions · 2026-01-29T15:48:58Z

PR Preview Action v1.8.1
🚀 View preview at https://cli.sentry.dev/pr-preview/pr-106/
Built to branch `gh-pages` at 2026-01-29 15:48 UTC. Preview will be ready when the GitHub Pages deployment is complete.

cursor

Cursor Bugbot has reviewed your changes and found 4 potential issues.

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

cursor · 2026-01-29T15:56:23Z

+  --sl-color-gray-4: #555555 !important;
+  --sl-color-gray-5: #333333 !important;
+  --sl-color-gray-6: #1a1a1a !important;
+}


Gray scale values override original "BOOSTED CONTRAST" design

Medium Severity

The new "Force Dark Mode Globally" CSS section uses the selector :root, :root[data-theme="light"] which includes plain :root that always matches. This causes the gray scale values with !important to always override the original "BOOSTED CONTRAST" values at the top of the file. The new --sl-color-gray-5: #333333 and --sl-color-gray-6: #1a1a1a have very low contrast against the #0a0a0f background, potentially making UI elements using these variables difficult to see. The original values (#94a3b8 and #64748b) were deliberately lighter for readability.

cursor · 2026-01-29T15:56:23Z

+
+:root {
+  color-scheme: dark !important;
+}


Duplicate color-scheme declaration in CSS file

Low Severity

The declaration color-scheme: dark !important; is duplicated in the same file - once at line 10 within the original :root, html, html[data-theme="light"], html[data-theme="dark"] block, and again at line 1632 in a new :root block. This redundancy increases maintenance burden as both need to be updated together if changes are needed.

Additional Locations (1)

docs/src/styles/custom.css#L5-L11

cursor · 2026-01-29T15:56:23Z

+  border: 1px solid rgba(255, 255, 255, 0.1) !important;
+  border-radius: 8px !important;
+  color: #ffffff !important;
+}


Redundant ID and attribute selectors target same element

Low Severity

The selectors use both summary#starlight__on-this-page--mobile and summary[id="starlight__on-this-page--mobile"] in the same comma-separated list. These target the exact same element - the attribute selector [id="..."] is functionally equivalent to the ID selector #.... This redundancy appears in multiple rule sets (lines 1692-1693, 1700-1701, 1706-1707, 1711-1714).

Additional Locations (1)

docs/src/styles/custom.css#L1699-L1716

cursor · 2026-01-29T15:56:23Z

+
+mobile-starlight-toc a:hover {
+  color: #ffffff !important;
+}


Overlapping mobile TOC styles target same elements

Low Severity

Two separate styling blocks target the mobile table of contents with overlapping selectors: mobile-starlight-toc styles (lines 1652-1689) and summary#starlight__on-this-page--mobile styles (lines 1691-1717). Both set similar properties like background-color, color, and border-color on the .toggle and .display-current elements, creating potential specificity conflicts and maintenance burden.

Additional Locations (1)

docs/src/styles/custom.css#L1690-L1717

betegon and others added 3 commits January 29, 2026 12:19

fix(docs): improve mobile header layout and hamburger menu

ec49f1c

- Make search bar compact (icon-only) on mobile screens - Style hamburger menu button for dark theme visibility - Increase header background opacity for better readability

cursor Bot reviewed Jan 29, 2026

View reviewed changes

betegon merged commit 116469c into main Jan 29, 2026
22 checks passed

betegon deleted the fix/mobile-styling-landing-page branch January 29, 2026 16:00

sentry-release-bot Bot mentioned this pull request Jan 29, 2026

publish: getsentry/cli@0.4.0 getsentry/publish#7029

Closed

3 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix(docs): Mobile styling improvements for landing page#106

fix(docs): Mobile styling improvements for landing page#106
betegon merged 3 commits into
mainfrom
fix/mobile-styling-landing-page

betegon commented Jan 29, 2026

Uh oh!

github-actions Bot commented Jan 29, 2026

New Features ✨

Bug Fixes 🐛

Uh oh!

github-actions Bot commented Jan 29, 2026

Uh oh!

github-actions Bot commented Jan 29, 2026

Built to branch `gh-pages` at 2026-01-29 15:48 UTC.
Preview will be ready when the GitHub Pages deployment is complete.

Uh oh!

cursor Bot left a comment

Uh oh!

cursor Bot Jan 29, 2026

Uh oh!

cursor Bot Jan 29, 2026

Uh oh!

cursor Bot Jan 29, 2026

Uh oh!

cursor Bot Jan 29, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

betegon commented Jan 29, 2026

Summary

Changes

Test plan

Uh oh!

github-actions Bot commented Jan 29, 2026

Semver Impact of This PR

New Features ✨

Bug Fixes 🐛

Uh oh!

github-actions Bot commented Jan 29, 2026

Codecov Results 📊

Uh oh!

github-actions Bot commented Jan 29, 2026

Built to branch gh-pages at 2026-01-29 15:48 UTC. Preview will be ready when the GitHub Pages deployment is complete.

Uh oh!

cursor Bot left a comment

Choose a reason for hiding this comment

Uh oh!

cursor Bot Jan 29, 2026

Choose a reason for hiding this comment

Gray scale values override original "BOOSTED CONTRAST" design

Uh oh!

cursor Bot Jan 29, 2026

Choose a reason for hiding this comment

Duplicate color-scheme declaration in CSS file

Uh oh!

cursor Bot Jan 29, 2026

Choose a reason for hiding this comment

Redundant ID and attribute selectors target same element

Uh oh!

cursor Bot Jan 29, 2026

Choose a reason for hiding this comment

Overlapping mobile TOC styles target same elements

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Built to branch `gh-pages` at 2026-01-29 15:48 UTC.
Preview will be ready when the GitHub Pages deployment is complete.