[Accesibility] Content loss when page has viewport width of 320 CSS pixels

[Krituhar]

• VS Code Version: 1.88.0
• OS Version: MacOS Sonoma (v14.6.1)

[Issue]
The left Commonly used section tree view gets disappear and the text content gets cutoff when the page has a viewport width of 320 CSS pixels.

[User Impact]
Users with low vision who need to resize text will be prevented from accessing this content.

Steps to reproduce:

1. Open VScode settings
2. Resixe VSCode viewport to 320 CSS pixels
3. You can see that the content under User tab in Commonly used section gets disappear in that state and hidden under ... (Hamburger option) also.

User behaviour: The content User tab in COmmonly Used section getting dissappear after setting the page viewport to 320 CSS pixels.

Expected behaviour: The above content need to be either shown/persist or hidden via "..." (hamburger option).

[Recommendation]
Ensure pages reflow without requiring two-dimensional scrolling without loss of content or functionality. When the page has a viewport width of 320 CSS pixels, all content and functionality must still be available without requiring horizontal scrolling.

Moving content to an accessible show/hide control, such as a hamburger menu, is acceptable.

Screenshot of issue:

[vs-code-engineering]

Thanks for creating this issue! It looks like you may be using an old version of VS Code, the latest stable release is 1.92.2. Please try upgrading to the latest version and checking whether this issue remains.

Happy Coding!

[Yoyokrazy]

/duplicate #227503

[vs-code-engineering]

Thanks for creating this issue! We figured it's covering the same as another one we already have. Thus, we closed this one as a duplicate. You can search for similar existing issues. See also our issue reporting guidelines.

Happy Coding!