Skip to content

fix: step circles overflow left edge#977

Merged
Yeom-JinHo merged 1 commit into
magicuidesign:mainfrom
d1rshan:fix/step-circles
May 31, 2026
Merged

fix: step circles overflow left edge#977
Yeom-JinHo merged 1 commit into
magicuidesign:mainfrom
d1rshan:fix/step-circles

Conversation

@d1rshan

@d1rshan d1rshan commented May 30, 2026

Copy link
Copy Markdown
Contributor

Description

Step circles on the installation page overflow beyond the left viewport edge on smaller screens. Switched from a hardcoded margin-left: -50px to responsive max-lg: variants.

Changes

  • Bug fix: Replaced margin-left: -50px with max-lg:ms-0 max-lg:-start-2 on .steps > h3:before to keep the circle within the viewport on smaller screens
  • Enhancement: Added max-lg:relative max-lg:ps-8 to .steps > h3 to anchor the absolutely positioned circle and prevent text overlap

Motivation

On screens narrower than 1024px, the step number circles were partially outside the visible area, breaking the installation guide's usability on tablets and phones.

Breaking Changes

None

Screenshots

Device / Browser / Viewport: Mobile / <1024px

Before After
image step-circles

@vercel

vercel Bot commented May 30, 2026

Copy link
Copy Markdown

@d1rshan is attempting to deploy a commit to the product-studio Team on Vercel.

A member of the Team first needs to authorize it.

@Yeom-JinHo Yeom-JinHo self-requested a review May 30, 2026 17:44

@Yeom-JinHo Yeom-JinHo left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

@d1rshan
Tysm for your contribution !

@Yeom-JinHo Yeom-JinHo merged commit f456d72 into magicuidesign:main May 31, 2026
5 of 6 checks passed
@d1rshan d1rshan deleted the fix/step-circles branch May 31, 2026 01:32
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants