browser - modify styling to remove scrolling glitch in virtual list (#4316)

apps/browser/src/popup/components/cipher-row.component.html

@@ -1,9 +1,10 @@
 <div
   role="group"
   appA11yTitle="{{ cipher.name }}"
-  class="box-content-row box-content-row-flex virtual-scroll-item"
+  class="virtual-scroll-item"
   [ngClass]="{ 'override-last': !last }"
 >
+  <div class="box-content-row box-content-row-flex">
     <button
       type="button"
       (click)="selectCipher(cipher)"
@@ -46,4 +47,5 @@
       class="action-buttons"
     >
     </app-action-buttons>
+  </div>
 </div>

apps/browser/src/popup/scss/box.scss

@@ -115,11 +115,14 @@
   &.list {
     margin: 10px 0 20px 0;
     .box-content {
+      .virtual-scroll-item {
+        display: inline-block;
+        width: 100%;
+      }
+
       .box-content-row {
-        padding: 5px 10px;
         text-decoration: none;
         border-radius: $border-radius;
-        margin: 5px;
         // background-color: $background-color;
 
         @include themify($themes) {
@@ -230,7 +233,7 @@
   position: relative;
   z-index: 1;
   border-radius: $border-radius;
-  margin: 8px 5px;
+  margin: 3px 5px;
 
   @include themify($themes) {
     background-color: themed("boxBackgroundColor");

apps/browser/src/popup/vault/vault-filter.component.html

@@ -200,7 +200,7 @@
       <p>{{ "noItemsInList" | i18n }}</p>
     </div>
     <cdk-virtual-scroll-viewport
-      itemSize="46"
+      itemSize="55"
       minBufferPx="400"
       maxBufferPx="600"
       *ngIf="ciphers && ciphers.length > 0"

apps/browser/src/popup/vault/vault-items.component.html

@@ -93,7 +93,7 @@
       </div>
     </div>
     <cdk-virtual-scroll-viewport
-      itemSize="46"
+      itemSize="55"
       minBufferPx="400"
       maxBufferPx="600"
       *ngIf="ciphers.length"