[PS-2112] browser - Fix scrolling glitch in virtual list

[patrickdemers6]

Type of change

- [x] Bug fix
- [ ] New feature development
- [ ] Tech debt (refactoring, code cleanup, dependency upgrades, etc)
- [ ] Build/deploy pipeline (DevOps)
- [ ] Other

Objective

Closes #4268.

When scrolling through items in the browser extension, the list jumps around. This is an unpleasant UI quirk which this PR aims to resolve.

Code changes

To render items, a virtualized list is being used. This requires a fixed height per item to allow calculating offsets properly.

Within cdk-virtual-scroll-viewport documentation, the following is found:

Be careful that the parent does not introduce additional space (e.g. via margin or padding) as it will interfere with the scrolling. (source)

This was being violated by the current implementation as the outer element of each item had padding and margin.

I have modified the cipher-row component to have its outermost element margin and padding free. I have also updated the itemSize to reflect the actual size of the component. These changes make butter-smooth scrolling.

• vault-filter.component.html: Modify the height of elements in the virtual list.
• vault-items.component.html: Modify the height of elements in the virtual list.
• cipher-row.component.html: Modify the outer component to have no padding or margin associated with it.
• box.scss: Modify styling to ensure the new implementation's design remains similar to existing design.

Screenshots

Before

Here you can observe the jerky/jumpy scrolling.

bitwarden_jerky_scroll.webm

After

Here you can observe there are no jumps in the scrolling. It is smooth.

bitwarden_smooth_scroll.webm

[bitwarden-bot]

Thank you for your contribution! We've added this to our internal Community PR board for review. ID: PS-2112

[AbdelrahmanMahmoudMD]

Amazing, Thank you for your effort and speed fix, waiting for this to be released <3

[rr-bw]

Thanks @patrickdemers6, looks great and QA approved.