restructure scroll containers on popup page and vault

Author: vleague2

apps/browser/src/platform/popup/layout/popup-layout.mdx

@@ -174,21 +174,51 @@ When the browser extension is popped out, the "popout" button should not be pass
 
 ## With Virtual Scroll
 
-If you are using a virtual scrolling container inside of the popup page (aka replacing the default
-popup page scrolling container with a virtual scroll container), you'll want to configure the
-component in the following ways:
-
-- Use the `disablePadding` input on the `popup-page`
-- Add padding and scrollbar to the virtual scrolling element to match the default behavior of the
-  popup page scroll container, which ensures that the scrollbar is at the far right edge of the
-  popup
-- Add max width to the child of the virtual scroll element, matching the max width breakpoints used
-  in the `popup-page`
+If you are using a virtual scrolling container inside of the popup page, you'll want to apply the
+`bitScrollLayout` directive to the `cdk-virtual-scroll-viewport` element. This tells the virtual
+scroll viewport to use the popup page's scroll layout div as the scrolling container.
 
 See the code in the example below.
 
 <Canvas of={stories.WithVirtualScrollChild} />
 
+### Known Virtual Scroll Issues
+
+Virtual scroll will not work in this specific case, where the `bitScrollLayout` is a child of the
+`popup-page` within the same template file:
+
+```
+<popup-page>
+  <cdk-virtual-scroll-viewport bitScrollLayout>
+    // virtual scroll implementation here
+  </div>
+</popup-page>
+```
+
+This is due to the way Angular initializes components. In this particular composition, the child
+gets constructed before the `popup-page` and thus has no scroll container to reference. Workarounds
+are:
+
+1. Wrap the child in another component
+
+```
+<popup-page>
+  <component-that-contains-bitScrollLayout></component-that-contains-bitScrollLayout>
+</popup-page>
+```
+
+2. Use a `defer` block
+
+```
+<popup-page>
+  @defer (on immediate) {
+    <cdk-virtual-scroll-viewport bitScrollLayout>
+      // virtual scroll implementation here
+    </div>
+  }
+</popup-page>
+```
+
 # Other stories
 
 ## Centered Content

apps/browser/src/platform/popup/layout/popup-layout.stories.ts

@@ -19,6 +19,7 @@ import {
   NoItemsModule,
   SearchModule,
   SectionComponent,
+  ScrollLayoutDirective,
 } from "@bitwarden/components";
 
 import { PopupRouterCacheService } from "../view-cache/popup-router-cache.service";
@@ -318,6 +319,7 @@ export default {
   decorators: [
     moduleMetadata({
       imports: [
+        ScrollLayoutDirective,
         PopupTabNavigationComponent,
         PopupHeaderComponent,
         PopupPageComponent,
@@ -656,53 +658,48 @@ export const WithVirtualScrollChild: Story = {
     props: { ...args, data: Array.from(Array(20).keys()) },
     template: /* HTML */ `
       <extension-popped-container>
-        <popup-page disablePadding>
+        <popup-page>
           <popup-header slot="header" pageTitle="Test"> </popup-header>
           <mock-search slot="above-scroll-area"></mock-search>
-          <div
-            cdkVirtualScrollingElement
-            class="tw-h-full tw-p-3 bit-compact:tw-p-2 tw-styled-scrollbar"
-          >
-            <div class="tw-max-w-screen-sm tw-mx-auto">
-              <bit-section>
-                <bit-item-group aria-label="Mock Vault Items">
-                  <cdk-virtual-scroll-viewport itemSize="55">
-                    <bit-item *cdkVirtualFor="let item of data; index as i">
-                      <button type="button" bit-item-content>
-                        <i
-                          slot="start"
-                          class="bwi bwi-globe tw-text-3xl tw-text-muted"
-                          aria-hidden="true"
-                        ></i>
-                        {{ i }} of {{ data.length - 1 }}
-                        <span slot="secondary">Bar</span>
-                      </button>
-
-                      <ng-container slot="end">
-                        <bit-item-action>
-                          <button type="button" bitBadge variant="primary">Fill</button>
-                        </bit-item-action>
-                        <bit-item-action>
-                          <button
-                            type="button"
-                            bitIconButton="bwi-clone"
-                            aria-label="Copy item"
-                          ></button>
-                        </bit-item-action>
-                        <bit-item-action>
-                          <button
-                            type="button"
-                            bitIconButton="bwi-ellipsis-v"
-                            aria-label="More options"
-                          ></button>
-                        </bit-item-action>
-                      </ng-container>
-                    </bit-item>
-                  </cdk-virtual-scroll-viewport>
-                </bit-item-group>
-              </bit-section>
-            </div>
-          </div>
+          <bit-section>
+            @defer (on immediate) {
+            <bit-item-group aria-label="Mock Vault Items">
+              <cdk-virtual-scroll-viewport itemSize="61" bitScrollLayout>
+                <bit-item *cdkVirtualFor="let item of data; index as i">
+                  <button type="button" bit-item-content>
+                    <i
+                      slot="start"
+                      class="bwi bwi-globe tw-text-3xl tw-text-muted"
+                      aria-hidden="true"
+                    ></i>
+                    {{ i }} of {{ data.length - 1 }}
+                    <span slot="secondary">Bar</span>
+                  </button>
+
+                  <ng-container slot="end">
+                    <bit-item-action>
+                      <button type="button" bitBadge variant="primary">Fill</button>
+                    </bit-item-action>
+                    <bit-item-action>
+                      <button
+                        type="button"
+                        bitIconButton="bwi-clone"
+                        aria-label="Copy item"
+                      ></button>
+                    </bit-item-action>
+                    <bit-item-action>
+                      <button
+                        type="button"
+                        bitIconButton="bwi-ellipsis-v"
+                        aria-label="More options"
+                      ></button>
+                    </bit-item-action>
+                  </ng-container>
+                </bit-item>
+              </cdk-virtual-scroll-viewport>
+            </bit-item-group>
+            }
+          </bit-section>
         </popup-page>
       </extension-popped-container>
     `,

apps/browser/src/platform/popup/layout/popup-page.component.html

@@ -14,17 +14,16 @@
     </div>
   </div>
   <div
-    class="tw-mx-auto tw-overflow-y-auto tw-flex tw-flex-col tw-size-full tw-styled-scrollbar"
+    class="tw-mx-auto tw-overflow-y-auto tw-size-full tw-styled-scrollbar"
     data-testid="popup-layout-scroll-region"
     (scroll)="handleScroll($event)"
     [ngClass]="{
       'tw-invisible': loading,
       'tw-p-3 bit-compact:tw-p-2': !disablePadding,
     }"
+    bitScrollLayoutHost
   >
-    <div
-      class="has-[[cdkvirtualscrollingelement]]:tw-max-w-full tw-max-w-screen-sm tw-mx-auto tw-flex-1 tw-flex tw-flex-col tw-w-full"
-    >
+    <div class="tw-max-w-screen-sm tw-mx-auto tw-flex tw-flex-col tw-w-full">
       <ng-content></ng-content>
     </div>
   </div>

apps/browser/src/platform/popup/layout/popup-page.component.ts

@@ -2,6 +2,7 @@ import { CommonModule } from "@angular/common";
 import { booleanAttribute, Component, inject, Input, signal } from "@angular/core";
 
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { ScrollLayoutHostDirective } from "@bitwarden/components";
 
 @Component({
   selector: "popup-page",
@@ -10,7 +11,7 @@ import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.servic
   host: {
     class: "tw-h-full tw-flex tw-flex-col tw-overflow-y-hidden",
   },
-  imports: [CommonModule],
+  imports: [CommonModule, ScrollLayoutHostDirective],
 })
 export class PopupPageComponent {
   protected i18nService = inject(I18nService);

apps/browser/src/vault/popup/components/vault-v2/vault-list-items-container/vault-list-items-container.component.html

@@ -89,10 +89,7 @@ <h3 class="tw-text-muted tw-text-xs tw-font-semibold tw-pl-1 tw-mb-1 bit-compact
         </h3>
       </ng-container>
 
-      <cdk-virtual-scroll-viewport
-        [itemSize]="itemHeight$ | async"
-        class="tw-overflow-visible [&>.cdk-virtual-scroll-content-wrapper]:[contain:layout_style]"
-      >
+      <cdk-virtual-scroll-viewport [itemSize]="itemHeight$ | async" bitScrollLayout>
         <bit-item *cdkVirtualFor="let cipher of group.ciphers">
           <button
             bit-item-content

apps/browser/src/vault/popup/components/vault-v2/vault-list-items-container/vault-list-items-container.component.ts

@@ -42,6 +42,7 @@ import {
   SectionComponent,
   SectionHeaderComponent,
   TypographyModule,
+  ScrollLayoutDirective,
 } from "@bitwarden/components";
 import {
   DecryptionFailureDialogComponent,
@@ -74,6 +75,7 @@ import { ItemMoreOptionsComponent } from "../item-more-options/item-more-options
     ScrollingModule,
     DisclosureComponent,
     DisclosureTriggerForDirective,
+    ScrollLayoutDirective,
   ],
   selector: "app-vault-list-items-container",
   templateUrl: "vault-list-items-container.component.html",

apps/browser/src/vault/popup/components/vault-v2/vault-v2.component.html

@@ -1,4 +1,4 @@
-<popup-page [loading]="loading$ | async" disablePadding>
+<popup-page [loading]="loading$ | async">
   <popup-header slot="header" [pageTitle]="'vault' | i18n">
     <ng-container slot="end">
       <app-new-item-dropdown [initialValues]="newItemItemValues$ | async"></app-new-item-dropdown>
@@ -86,27 +86,21 @@
       </div>
     </div>
 
-    <div
-      *ngIf="vaultState === null"
-      cdkVirtualScrollingElement
-      class="tw-h-full tw-p-3 bit-compact:tw-p-2 tw-styled-scrollbar"
-    >
-      <div class="tw-max-w-screen-sm tw-mx-auto">
-        <app-autofill-vault-list-items></app-autofill-vault-list-items>
-        <app-vault-list-items-container
-          [title]="'favorites' | i18n"
-          [ciphers]="(favoriteCiphers$ | async) || []"
-          id="favorites"
-          collapsibleKey="favorites"
-        ></app-vault-list-items-container>
-        <app-vault-list-items-container
-          [title]="'allItems' | i18n"
-          [ciphers]="(remainingCiphers$ | async) || []"
-          id="allItems"
-          disableSectionMargin
-          collapsibleKey="allItems"
-        ></app-vault-list-items-container>
-      </div>
-    </div>
+    <ng-container *ngIf="vaultState === null">
+      <app-autofill-vault-list-items></app-autofill-vault-list-items>
+      <app-vault-list-items-container
+        [title]="'favorites' | i18n"
+        [ciphers]="(favoriteCiphers$ | async) || []"
+        id="favorites"
+        collapsibleKey="favorites"
+      ></app-vault-list-items-container>
+      <app-vault-list-items-container
+        [title]="'allItems' | i18n"
+        [ciphers]="(remainingCiphers$ | async) || []"
+        id="allItems"
+        disableSectionMargin
+        collapsibleKey="allItems"
+      ></app-vault-list-items-container>
+    </ng-container>
   </ng-container>
 </popup-page>