Bug - Password Generator - Inconsistent Demo Layout in Docs (HTML vs TSX Demos)

Describe the problem

In the docs for Password Generator, there is an issue with the layout of the demo.

The HTML demo uses a FormGroup component, which renders the demo at the correct width (with a max-width of 825px set in the docs framework).

The TSX demo uses the InputGroup component, which seems to be the new recommended React component for this functionality. However the InputGroup demo is rendered at a very small width, making the code editor and the demo code difficult to read:

How do you reproduce the problem?

1. Go to the React docs for Password Generator
2. See the TSX demo using InputGroup, which is collapsed and has a narrow width.
3. Compare to the HTML demo using FormGroup which has the proper layout.

Expected behavior

TSX demo for the Password Generator should be displayed with the same layout and width as the HTML demo.

Screenshots

See above

What is your environment?

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Chrome

Bắt đầu từ trang tài liệu React Password Generator và so sánh bản demo TSX InputGroup với bản demo HTML FormGroup. Kiểm tra template framework tài liệu được liên kết tại packages/documentation-framework/templates/mdx.js, sau đó xác minh rằng bản demo TSX có cùng chiều rộng dễ đọc và bố cục như bản demo HTML.