Skip to content

feat(storybook): improve rem font sizing for mobile#76

Open
shijistar wants to merge 2 commits into
masterfrom
feat/storybook-rem-font-sizing
Open

feat(storybook): improve rem font sizing for mobile#76
shijistar wants to merge 2 commits into
masterfrom
feat/storybook-rem-font-sizing

Conversation

@shijistar

Copy link
Copy Markdown
Owner

Summary

  • convert Storybook font-size declarations in custom docs/demo styles from px to rem
  • improve mobile readability by raising the preview iframe root font size on narrow viewports
  • cover Ant Design portal overlays (Select/Dropdown/Modal-related content) so mobile font sizing stays consistent outside .enum-story-shell

Validation

  • npm run build-storybook
  • independent review for selector scope and portal coverage

Copilot AI review requested due to automatic review settings June 4, 2026 11:07

Copilot AI left a comment

Copy link
Copy Markdown

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 improves Storybook typography scaling—moving custom docs/demo styles to rem and increasing the preview iframe’s root font-size on narrow viewports—so text remains readable on mobile, including Ant Design portal-based overlays that render outside .enum-story-shell.

Changes:

  • Convert Storybook custom docs/demo font-size declarations from px to rem.
  • Increase the preview iframe :root font-size for mobile breakpoints to improve readability.
  • Add mobile-only font-size targeting for Ant Design portal overlays mounted outside .enum-story-shell.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File Description
.storybook/story-styles.css Switches many sizes to rem, bumps iframe root font size on small screens, and adds mobile overlay font-size rules for Ant Design portal content.
.storybook/global-styles.css Converts sidebar font sizing to rem and increases it on small screens for better manager UI readability.

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

Comment on lines +4 to +5
text-size-adjust: 100%;
text-size-adjust: 100%;
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