Skip to content

fix(theme): Fixed step counter text alignment#2981

Merged
SoonIter merged 1 commit intoweb-infra-dev:mainfrom
elliotcourant:fix/step-text-center
Jan 9, 2026
Merged

fix(theme): Fixed step counter text alignment#2981
SoonIter merged 1 commit intoweb-infra-dev:mainfrom
elliotcourant:fix/step-text-center

Conversation

@elliotcourant
Copy link
Copy Markdown
Contributor

Summary

The text in the stepper counter was not quite centered because of how text renders. I've set the line height to match the height of the :before such that the alignment should now be more centered vertically.

Sorry for more small PRs for these tiny things I'm noticing as I tinker.

This essentially amounts to like a 1 pixel difference.

Before

image

After

image

Diff

diff

Related Issue

N/A

Checklist

  • Tests updated (or not required).
  • Documentation updated (or not required).

The text in the stepper counter was not quite centered because of how
text renders. I've set the line height to match the height of the
`:before` such that the alignment should now be more centered
vertically.
Copilot AI review requested due to automatic review settings January 9, 2026 02:44
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR fixes a minor vertical alignment issue in the stepper counter component by adding a line-height property to match the height of the counter's :before pseudo-element.

  • Sets line-height: 30px to improve vertical centering of text within the step counter

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

@netlify
Copy link
Copy Markdown

netlify Bot commented Jan 9, 2026

Deploy Preview for rspress-v2 ready!

Name Link
🔨 Latest commit 58a2362
🔍 Latest deploy log https://app.netlify.com/projects/rspress-v2/deploys/69606b7bd1d8b90007f0661d
😎 Deploy Preview https://deploy-preview-2981--rspress-v2.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Copy link
Copy Markdown
Member

@SoonIter SoonIter left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

thanks❤️️

@SoonIter
Copy link
Copy Markdown
Member

SoonIter commented Jan 9, 2026

By the way, are you developing any products with Rspress V2? 🫰🏻

Welcome to showcase your Rspress website here 🍻

@SoonIter SoonIter merged commit 2807084 into web-infra-dev:main Jan 9, 2026
9 checks passed
@elliotcourant
Copy link
Copy Markdown
Contributor Author

By the way, are you developing any products with Rspress V2? 🫰🏻

Welcome to showcase your Rspress website here 🍻

I'm currently trying to migrate my app's main website from nextra to rspress (https://monetr.app) but I'm not done quite yet. I've been using rsbuild/rspack for a long time now and its been such a better experience across the board so I want to keep things consistent.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants