Carbon: [NumberInput] Mobile variant width sizing issue

[JordanWSmith15]

Visual issue with mobile variant knob on number input

What package(s) are you using?

• [X] carbon-components-react

Detailed description

The number input mobile variant knob, when used in a form, does not size/justify well with other components (text, dropdown, ext) and causes a visual "rag"
See screen shots:

Is this issue related to a specific component?
NumberInput, Mobile Variant Knob
https://react.carbondesignsystem.com/?path=/story/numberinput--default

What did you expect to happen? What happened instead? What would you like to
see changed?
Component should be the same width as others when placed within a container

What browser are you working in?
Chrome, FF
What version of the Carbon Design System are you using?

What offering/product do you work on? Any pressing ship or release dates we
should be aware of?
Maximo, March first D-cut of Application Suite

[emyarod]

quick edit in storybook looks like this (depending on the width of the viewport)

can you create a reduced test case in Code Sandbox for this?

[priyankitshukla]

Hi @emyarod ,
Please find below link to reproduce,
https://pages.github.ibm.com/maximo-app-framework/graphite/reference-app/#/dataFormatting

Please choose third Tab Single Smart Edit to see mentioned defect.

Thanks

[emyarod]

the behavior you are describing seems to be affected by the align-items rule on your container div