Audit components for consistent border-box box-sizing

[jcfranco]

Description

Some components do not have box-sizing: border-box set and could produce inconsistent layouts.

Proposed Advantages

Consistent box-sizing and more predictable layout.

Which Component

all of the components!

Relevant Info

• From https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing#:~:text=Note%3A%20It,is%20sometimes%20desirable:

  Note: It is often useful to set box-sizing to border-box to lay out elements. This makes dealing with the sizes of elements much easier, and generally eliminates a number of pitfalls you can stumble on while laying out your content. On the other hand, when using position: relative or position: absolute, use of box-sizing: content-box allows the positioning values to be relative to the content, and independent of changes to border and padding sizes, which is sometimes desirable.

• https://www.paulirish.com/2012/box-sizing-border-box-ftw/

Calcite package

• @esri/calcite-components
• @esri/calcite-components-react
• @esri/calcite-design-tokens
• @esri/calcite-ui-icons
• @esri/eslint-plugin-calcite-components

[jcfranco]

Related: #11031