Components with `rem` unit have layout problem.

[nonjene]

Originally posted by @ry5n in #296 (comment)

Issue summary

utilities.scss's $base-font-size set to 10px will cause layout problem in Chrome in which system's language is Chinese or Japanese.

Because at that env Chrome will limit the min font size to 12px, 10px will not take effect. It will cause components with rem unit have larger size.

Expected behavior

Set utilities.scss's $base-font-size to 12px

Actual behavior

You can easily recreate the issue by setting the the html element's font-size to 12px in Chrome's devtool.

Steps to reproduce the problem

1. Change the system language to Chinese or Japanese

Specifications

• Are you using the React components? (Y/N): Y
• Polaris version number: v2.8 and v2.10
• Browser: Chrome
• Device: Macbook pro
• Operating System: macOS High Sierra 10.13.6

---

[dpersing]

Hi @nonjene! We're working on some updates that should help improve this.

[nonjene]

@dpersing Thank you for the update.

[yourpalsonja]

@nonjene This repo getting a makeover! We want to make it easier to find existing issues, remove duplicates, and increase community engagement. If you issue is closed, re-labelled, or moved, don’t panic–it may be a duplicate (check the comments), or there is a new label or repository that work better.

If you disagree with the changes or have any other thoughts on how we can make Polaris better, please let us know!

In this case, it's because we're removing the WIP label in favour of this issue getting triaged in our backlog. I've reached out to @ry5n and @dpersing to see where we're at on this issue. If it can be closed, feel free to do that as well.