CSS Layout bug with number fields and suffix

[asacarter]

Issue summary

In Firefox, if a number text field also contains a suffix and the width of the text field is 240px or smaller, the increment and decrement buttons appear to be outside of the text box.

The issue does not seem to occur in Chrome.

Expected behavior

Layout should display as it does in Chrome.

Actual behavior

Layout is broken in Firefox.

Layout is fine in Chrome

Steps to Reproduce the Problem

1. Create a text area of type number.
2. Add a suffix such as 'weeks'.
3. Make the container 240px.
4. View the result in Firefox and compare with Chrome.

Specifications

• Polaris version: 1.0.3
• React version: n/a
• Browser: Firefox 53.0.3
• Device: PC
• Operating System: Windows 10

[lemonmade]

Thanks for the issue, @asacarter. I was able to recreate locally. I've added a note to our internal issue tracker and we should get this fixed soon.

[lemonmade]

Should be fixed by v1.1.0

[asacarter]

Still not resolved in v1.1.1 using the same HTML structure. Or has that changed?

Hopefully this can be looked at again as it is breaking layouts when used in a sidebar or on mobile.

[lemonmade]

Shoot, you are right. We didn't get this fix into the 1.1.0 release. We will get a release out this week that includes it.

[dfmcphee]

This should be resolved now.

[asacarter]

It seems to be resolved in our app now.