Unexpected Behavior in Docs

[starkfire]

Describe the bug There are some sections in the docs with unwanted empty spaces at the bottom. Scrolling down continuously on sections with radio buttons or pressing any sample radio button will expose this empty space.

Issue happens on:

• Checkbox
• ControlBox
• Drawer
• FormControl
• Modal
• Radio

To Reproduce Steps to reproduce the behavior:

1. Visit any one of the following components:

• Checkbox
• ControlBox
• Drawer
• FormControl
• Modal
• Radio

2. Click on any radio button OR scroll down continuously

Expected behavior Same with other sections, there should be no empty space at the bottom of the window when visiting the affected sections. Clicking a radio button should only set a button to an 'active' state instead of exposing the empty space.

Screenshots

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Chrome
• Version: 97.0.4692.99 (64-bit)

Additional context

Issue is apparently caused by the main scrollbar, since disabling overflow-y: scroll in #main-content resolves the issue.

[carwack]

Thanks for noticing this!

I quickly took a look and it seems to be an issue with the CVisuallyHidden component that is used in the CRadio component. It has an absolute position but I don't see why it is acting up just now. 🤔

[TylerAPfledderer]

Hey folks! This might be related to Chrome. There is no extra scroll occurring in Firefox on any of these pages.

It can be solved by applying a position property with a value of 0 or less, like top: 0 or top: -999px