On applying reflow resolution all content present under the Schema section is not visible it is getting truncated and two scroll bars are appearing for it.

Q&A (please complete the following information)

• OS: Windows 11 Enterprise - 23H2
• Browser: Chrome- Version 124.0.6367.93 (Official Build) (64-bit)
• Edge - Version 124.0.2478.80 (Official build) (64-bit)
• Method of installation: npm
• Swagger-UI version: 4.6.1
• Swagger/OpenAPI version: [e.g. Swagger 2.0, OpenAPI 3.0]

Content & configuration

Example Swagger/OpenAPI definition:

# your YAML here

Swagger-UI configuration options:

SwaggerUI({
  // your config options here
})

?yourQueryStringConfig

Describe the bug you're encountering

On applying reflow resolution all content present under the Schema section is not visible it is getting truncated and two scroll bars are appearing for it.

To reproduce...

Steps to reproduce the behavior:

1. Launch the URL : https://codesandbox.io/p/sandbox/nervous-fog-d87m3w?file=%2fpackage.json
2. TAB till "Schema " section.
3. Tab till "Pet" and press enter.
4. Observe that On applying reflow resolution all content present under the Schema section is not visible it is getting truncated and two scroll bars are appearing for it or not.

Expected behavior

On applying reflow resolution all content present under the Schema section is should be visible it is should not get truncated and two scroll bars or Horizontal Scroll bar should not be appear for it.

Screenshots

https://github.com/swagger-api/swagger-ui/assets/93735775/3c23f46d-40d4-4abc-8d57-4db24827e397

Additional context or thoughts

Start with the CodeSandbox reproduction linked in the issue and follow the reported keyboard steps to the Schema and Pet sections at the stated reflow resolution. Inspect the rendered responsive layout around the schema content; done means the full content is visible without truncation or duplicate or horizontal scrollbars.