From 2f2d8325dacb84a1d3e2a209c5c75234d311467b Mon Sep 17 00:00:00 2001
From: Vicki League <vleague@bitwarden.com>
Date: Tue, 20 May 2025 09:26:21 -0400
Subject: [PATCH 1/4] [CL-473] Adjust popup page max width and scroll
 containers

---
 .../platform/popup/layout/popup-layout.mdx    | 20 +++++
 .../popup/layout/popup-layout.stories.ts      | 87 +++++++++++++++++--
 .../popup/layout/popup-page.component.html    | 17 ++--
 apps/browser/src/popup/scss/base.scss         |  8 --
 .../vault-v2/vault-v2.component.html          | 30 ++++---
 5 files changed, 127 insertions(+), 35 deletions(-)

diff --git a/apps/browser/src/platform/popup/layout/popup-layout.mdx b/apps/browser/src/platform/popup/layout/popup-layout.mdx
index 017ee20b3448..5b09595148e7 100644
--- a/apps/browser/src/platform/popup/layout/popup-layout.mdx
+++ b/apps/browser/src/platform/popup/layout/popup-layout.mdx
@@ -54,6 +54,9 @@ page looks nice when the extension is popped out.
     `false`.
 - `loadingText`
   - Custom text to be applied to the loading element for screenreaders only. Defaults to "Loading".
+- `disablePadding`
+  - When `true`, disables the padding of the scrollable region inside of `main`. You will need to
+    add your own padding to the element you place inside of this area.
 
 Basic usage example:
 
@@ -169,6 +172,23 @@ When the browser extension is popped out, the "popout" button should not be pass
 
 <Canvas of={stories.PoppedOut} />
 
+## 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`
+
+See the code in the example below.
+
+<Canvas of={stories.WithVirtualScrollChild} />
+
 # Other stories
 
 ## Centered Content
diff --git a/apps/browser/src/platform/popup/layout/popup-layout.stories.ts b/apps/browser/src/platform/popup/layout/popup-layout.stories.ts
index f20049f6cde9..4411801b2748 100644
--- a/apps/browser/src/platform/popup/layout/popup-layout.stories.ts
+++ b/apps/browser/src/platform/popup/layout/popup-layout.stories.ts
@@ -1,5 +1,6 @@
 // FIXME: Update this file to be type safe and remove this and next line
 // @ts-strict-ignore
+import { ScrollingModule } from "@angular/cdk/scrolling";
 import { CommonModule } from "@angular/common";
 import { Component, importProvidersFrom } from "@angular/core";
 import { RouterModule } from "@angular/router";
@@ -40,6 +41,17 @@ import { PopupTabNavigationComponent } from "./popup-tab-navigation.component";
 })
 class ExtensionContainerComponent {}
 
+@Component({
+  selector: "extension-popped-container",
+  template: `
+    <div class="tw-h-[640px] tw-w-[900px] tw-border tw-border-solid tw-border-secondary-300">
+      <ng-content></ng-content>
+    </div>
+  `,
+  standalone: true,
+})
+class ExtensionPoppedContainerComponent {}
+
 @Component({
   selector: "vault-placeholder",
   template: /*html*/ `
@@ -318,6 +330,7 @@ export default {
         CommonModule,
         RouterModule,
         ExtensionContainerComponent,
+        ExtensionPoppedContainerComponent,
         MockBannerComponent,
         MockSearchComponent,
         MockVaultSubpageComponent,
@@ -328,6 +341,11 @@ export default {
         MockVaultPagePoppedComponent,
         NoItemsModule,
         VaultComponent,
+        ScrollingModule,
+        ItemModule,
+        SectionComponent,
+        IconButtonModule,
+        BadgeModule,
       ],
       providers: [
         {
@@ -526,9 +544,9 @@ export const PoppedOut: Story = {
   render: (args) => ({
     props: args,
     template: /* HTML */ `
-      <div class="tw-h-[640px] tw-w-[900px] tw-border tw-border-solid tw-border-secondary-300">
+      <extension-popped-container>
         <mock-vault-page-popped></mock-vault-page-popped>
-      </div>
+      </extension-popped-container>
     `,
   }),
 };
@@ -576,10 +594,9 @@ export const TransparentHeader: Story = {
     template: /* HTML */ `
       <extension-container>
         <popup-page>
-          <popup-header slot="header" background="alt"
-            ><span class="tw-italic tw-text-main">🤠 Custom Content</span></popup-header
-          >
-
+          <popup-header slot="header" background="alt">
+            <span class="tw-italic tw-text-main">🤠 Custom Content</span>
+          </popup-header>
           <vault-placeholder></vault-placeholder>
         </popup-page>
       </extension-container>
@@ -624,3 +641,61 @@ export const WidthOptions: Story = {
     `,
   }),
 };
+
+export const WithVirtualScrollChild: Story = {
+  render: (args) => ({
+    props: { ...args, data: Array.from(Array(20).keys()) },
+    template: /* HTML */ `
+      <extension-popped-container>
+        <popup-page disablePadding>
+          <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>
+        </popup-page>
+      </extension-popped-container>
+    `,
+  }),
+};
diff --git a/apps/browser/src/platform/popup/layout/popup-page.component.html b/apps/browser/src/platform/popup/layout/popup-page.component.html
index 2313b942a381..690a85d623aa 100644
--- a/apps/browser/src/platform/popup/layout/popup-page.component.html
+++ b/apps/browser/src/platform/popup/layout/popup-page.component.html
@@ -2,25 +2,28 @@
 <main class="tw-flex-1 tw-overflow-hidden tw-flex tw-flex-col tw-relative tw-bg-background-alt">
   <ng-content select="[slot=full-width-notice]"></ng-content>
   <div
-    #nonScrollable
     class="tw-transition-colors tw-duration-200 tw-border-0 tw-border-b tw-border-solid tw-p-3 bit-compact:tw-p-2"
     [ngClass]="{
-      'tw-invisible !tw-p-0': loading || nonScrollable.childElementCount === 0,
+      'tw-invisible !tw-p-0 !tw-border-none': loading || nonScrollable.childElementCount === 0,
       'tw-border-secondary-300': scrolled(),
       'tw-border-transparent': !scrolled(),
     }"
   >
-    <ng-content select="[slot=above-scroll-area]"></ng-content>
+    <div class="tw-max-w-screen-sm tw-mx-auto tw-w-full" #nonScrollable>
+      <ng-content select="[slot=above-scroll-area]"></ng-content>
+    </div>
   </div>
   <div
-    class="tw-max-w-screen-sm 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-flex tw-flex-col tw-size-full tw-styled-scrollbar"
     data-testid="popup-layout-scroll-region"
     (scroll)="handleScroll($event)"
-    [ngClass]="{ 'tw-invisible': loading }"
+    [ngClass]="{
+      'tw-invisible': loading,
+      'tw-p-3 bit-compact:tw-p-2': !disablePadding,
+    }"
   >
     <div
-      class="tw-max-w-screen-sm tw-mx-auto tw-flex-1 tw-flex tw-flex-col tw-w-full"
-      [ngClass]="{ 'tw-p-3 bit-compact:tw-p-2': !disablePadding }"
+      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"
     >
       <ng-content></ng-content>
     </div>
diff --git a/apps/browser/src/popup/scss/base.scss b/apps/browser/src/popup/scss/base.scss
index 80ada61f8680..2b625678b890 100644
--- a/apps/browser/src/popup/scss/base.scss
+++ b/apps/browser/src/popup/scss/base.scss
@@ -381,14 +381,6 @@ app-root {
   }
 }
 
-// Adds padding on each side of the content if opened in a tab
-@media only screen and (min-width: 601px) {
-  header,
-  main {
-    padding: 0 calc((100% - 500px) / 2);
-  }
-}
-
 main:not(popup-page main) {
   position: absolute;
   top: 44px;
diff --git a/apps/browser/src/vault/popup/components/vault-v2/vault-v2.component.html b/apps/browser/src/vault/popup/components/vault-v2/vault-v2.component.html
index 42e772be062a..ae1cd086ee41 100644
--- a/apps/browser/src/vault/popup/components/vault-v2/vault-v2.component.html
+++ b/apps/browser/src/vault/popup/components/vault-v2/vault-v2.component.html
@@ -91,20 +91,22 @@
       cdkVirtualScrollingElement
       class="tw-h-full tw-p-3 bit-compact:tw-p-2 tw-styled-scrollbar"
     >
-      <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 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>
 </popup-page>

From d9a8013641b3c66a8541547113b9e96a4968456e Mon Sep 17 00:00:00 2001
From: Vicki League <vleague@bitwarden.com>
Date: Tue, 20 May 2025 09:57:02 -0400
Subject: [PATCH 2/4] remove strict mode warning

---
 apps/browser/src/platform/popup/layout/popup-layout.stories.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/apps/browser/src/platform/popup/layout/popup-layout.stories.ts b/apps/browser/src/platform/popup/layout/popup-layout.stories.ts
index 4411801b2748..5db6d91322db 100644
--- a/apps/browser/src/platform/popup/layout/popup-layout.stories.ts
+++ b/apps/browser/src/platform/popup/layout/popup-layout.stories.ts
@@ -1,5 +1,3 @@
-// FIXME: Update this file to be type safe and remove this and next line
-// @ts-strict-ignore
 import { ScrollingModule } from "@angular/cdk/scrolling";
 import { CommonModule } from "@angular/common";
 import { Component, importProvidersFrom } from "@angular/core";

From a5e9e842e8416c4996173c79486bd24e8d750077 Mon Sep 17 00:00:00 2001
From: Vicki League <vleague@bitwarden.com>
Date: Tue, 20 May 2025 10:39:26 -0400
Subject: [PATCH 3/4] fix strict mode errors

---
 .../popup/layout/popup-layout.stories.ts         | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/apps/browser/src/platform/popup/layout/popup-layout.stories.ts b/apps/browser/src/platform/popup/layout/popup-layout.stories.ts
index 5db6d91322db..843c55a3243e 100644
--- a/apps/browser/src/platform/popup/layout/popup-layout.stories.ts
+++ b/apps/browser/src/platform/popup/layout/popup-layout.stories.ts
@@ -527,7 +527,21 @@ export const CompactMode: Story = {
       const compact = canvasEl.querySelector(
         `#${containerId} [data-testid=popup-layout-scroll-region]`,
       );
-      const label = canvasEl.querySelector(`#${containerId} .example-label`);
+
+      if (!compact) {
+        // eslint-disable-next-line
+        console.error(`#${containerId} [data-testid=popup-layout-scroll-region] not found`);
+        return;
+      }
+
+      const label = canvasEl.querySelector(`#${containerId} `);
+
+      if (!label) {
+        // eslint-disable-next-line
+        console.error(`#${containerId} .example-label not found`);
+        return;
+      }
+
       const percentVisible =
         100 -
         Math.round((100 * (compact.scrollHeight - compact.clientHeight)) / compact.scrollHeight);

From 36a26d5f28a558da54b0036505b81f3d6ad4d528 Mon Sep 17 00:00:00 2001
From: Vicki League <vleague@bitwarden.com>
Date: Wed, 21 May 2025 10:06:26 -0400
Subject: [PATCH 4/4] fix accidentally deleted query selector

---
 apps/browser/src/platform/popup/layout/popup-layout.stories.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/browser/src/platform/popup/layout/popup-layout.stories.ts b/apps/browser/src/platform/popup/layout/popup-layout.stories.ts
index 843c55a3243e..d1700fa413c0 100644
--- a/apps/browser/src/platform/popup/layout/popup-layout.stories.ts
+++ b/apps/browser/src/platform/popup/layout/popup-layout.stories.ts
@@ -534,7 +534,7 @@ export const CompactMode: Story = {
         return;
       }
 
-      const label = canvasEl.querySelector(`#${containerId} `);
+      const label = canvasEl.querySelector(`#${containerId} .example-label`);
 
       if (!label) {
         // eslint-disable-next-line