fix(toggle): ensure toggle click target matches visual representation

[janhassel]

Closes #12117

Changelog

Changed

• Changed the toggle's container element to render as inline-block
• Changed the toggle element to render as inline-grid

Testing / Reviewing

• Ensure the toggle receives a click event when clicking on either the toggle or the label (both, side and top labels)
• Ensure the toggle doesn't receive a click event outside of the above mentioned elements

[netlify]

✅ Deploy Preview for carbon-components-react ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	ca54f6f
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-components-react/deploys/633f1071dab9bb0008767d4f
😎 Deploy Preview	https://deploy-preview-12212--carbon-components-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[netlify]

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	ca54f6f
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-elements/deploys/633f1071a8a77b00080c70d4
😎 Deploy Preview	https://deploy-preview-12212--carbon-elements.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[tay1orjones]

Awesome, clever fix! We'll have to see if moving the container to inline-block has any significant downstream impacts, but looks good to me. Thanks!

[aledavila]

lgtm thanks for this fix Jan