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

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

@@ -1,49 +1,51 @@
 <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 }"
 >
-  <button
-    type="button"
-    (click)="selectCipher(cipher)"
-    (dblclick)="launchCipher(cipher)"
-    appStopClick
-    title="{{ title }} - {{ cipher.name }}"
-    class="row-main"
-  >
-    <app-vault-icon [cipher]="cipher"></app-vault-icon>
-    <div class="row-main-content">
-      <span class="text">
-        <span class="truncate-box">
-          <span class="truncate">{{ cipher.name }}</span>
-          <ng-container *ngIf="cipher.organizationId">
-            <i
-              class="bwi bwi-collection text-muted"
-              title="{{ 'shared' | i18n }}"
-              aria-hidden="true"
-            ></i>
-            <span class="sr-only">{{ "shared" | i18n }}</span>
-          </ng-container>
-          <ng-container *ngIf="cipher.hasAttachments">
-            <i
-              class="bwi bwi-paperclip text-muted"
-              title="{{ 'attachments' | i18n }}"
-              aria-hidden="true"
-            ></i>
-            <span class="sr-only">{{ "attachments" | i18n }}</span>
-          </ng-container>
+  <div class="box-content-row box-content-row-flex">
+    <button
+      type="button"
+      (click)="selectCipher(cipher)"
+      (dblclick)="launchCipher(cipher)"
+      appStopClick
+      title="{{ title }} - {{ cipher.name }}"
+      class="row-main"
+    >
+      <app-vault-icon [cipher]="cipher"></app-vault-icon>
+      <div class="row-main-content">
+        <span class="text">
+          <span class="truncate-box">
+            <span class="truncate">{{ cipher.name }}</span>
+            <ng-container *ngIf="cipher.organizationId">
+              <i
+                class="bwi bwi-collection text-muted"
+                title="{{ 'shared' | i18n }}"
+                aria-hidden="true"
+              ></i>
+              <span class="sr-only">{{ "shared" | i18n }}</span>
+            </ng-container>
+            <ng-container *ngIf="cipher.hasAttachments">
+              <i
+                class="bwi bwi-paperclip text-muted"
+                title="{{ 'attachments' | i18n }}"
+                aria-hidden="true"
+              ></i>
+              <span class="sr-only">{{ "attachments" | i18n }}</span>
+            </ng-container>
+          </span>
         </span>
-      </span>
-      <span class="detail">{{ cipher.subTitle }}</span>
-    </div>
-  </button>
-  <app-action-buttons
-    [cipher]="cipher"
-    [showView]="showView"
-    (onView)="viewCipher(cipher)"
-    (launchEvent)="launchCipher(cipher)"
-    class="action-buttons"
-  >
-  </app-action-buttons>
+        <span class="detail">{{ cipher.subTitle }}</span>
+      </div>
+    </button>
+    <app-action-buttons
+      [cipher]="cipher"
+      [showView]="showView"
+      (onView)="viewCipher(cipher)"
+      (launchEvent)="launchCipher(cipher)"
+      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"