Browser Popup: Large number of nested collections causes vault items in the root collection to be inaccessible

[danielcotton]

Steps To Reproduce

1. Create a collection (e.g. "X")
2. Create a couple of vault items within collection "X" (the number of items does not matter)
3. Create approx 12 nested collections under collection "X" (e.g. "X/A", "X/B", "X/C" etc.). The number may depend on screen resolution, but enough to fill up the popup viewport.
4. In the browser extension, click on "Vault" and then "X" under collections

Expected Result

Both the nested collections and the items directly under collection "X" should be visible.

Actual Result

The list of vault items is pushed beyond the viewport by the list of nested collections. As such, it is not possible to scroll down to the vault items. The only way to see the vault items is to "Pop out" and make the BW window bigger (and even this would become impossible with enough nested collections).

Screenshots or Videos

This is with the viewport smaller than the list of nested collections. Note that there are no vault items visible, and the scroll bar is as low as it'll go:

Once I expand the viewport, I can see the vault items directly under the "root" collection. Note that there's now a (very small) scrollbar for the vault items alone:

Additional Context

Removing the stacked-boxes class from app-vault-items.main here seems to fix the issue in the sense that I can scroll down the list of Vault items, but I'm not familiar enough with the codebase to know what else that'll break. It also causes a slightly-ugly double-scroll-bar situation.

Perhaps the showGroupings method could have an additional check on whether the number of nested collections would cause a viewport overflow?

Operating System

Windows, macOS, Linux

Operating System Version

All versions

Web Browser

Firefox

Browser Version

125.0.3

Build Version

2024.4.1

Issue Tracking Info

• I understand that work is tracked outside of Github. A PR will be linked to this issue should one be opened to address it, but Bitwarden doesn't use fields like "assigned", "milestone", or "project" to track progress.

[NovaSilentium]

Hi there,

Thank you for your report!

I was able to reproduce this issue, and I have flagged this to our engineering team.

If you wish to add any further information/screenshots/recordings etc., please feel free to do so at any time - our engineering team will be happy to review these.

Thanks once again!