From 5a4ac17e03c50d059348b03c5ead8ab0309bf8d4 Mon Sep 17 00:00:00 2001
From: Brad <44413459+lastbestdev@users.noreply.github.com>
Date: Wed, 21 Jan 2026 09:25:53 -0800
Subject: [PATCH] [PM-30250] Prevent over scrolling on Inactive 2FA and
 Unsecure Website reports (#18399)

* use bit-table-scroll on inactive 2FA and unsecured website reports

* fix: back to reports button renders on report page load
---
 .../inactive-two-factor-report.component.html | 140 +++++++++---------
 .../unsecured-websites-report.component.html  | 111 +++++++-------
 .../reports/reports-layout.component.html     |   8 +-
 .../dirt/reports/reports-layout.component.ts  |  24 +--
 4 files changed, 137 insertions(+), 146 deletions(-)

diff --git a/apps/web/src/app/dirt/reports/pages/inactive-two-factor-report.component.html b/apps/web/src/app/dirt/reports/pages/inactive-two-factor-report.component.html
index 05758a854c2..9a99a55b77b 100644
--- a/apps/web/src/app/dirt/reports/pages/inactive-two-factor-report.component.html
+++ b/apps/web/src/app/dirt/reports/pages/inactive-two-factor-report.component.html
@@ -31,81 +31,75 @@
           </bit-toggle>
         </ng-container>
       </bit-toggle-group>
-      <bit-table [dataSource]="dataSource">
+      <bit-table-scroll [dataSource]="dataSource" [rowSize]="75">
         <ng-container header *ngIf="!isAdminConsoleActive">
-          <tr bitRow>
-            <th bitCell></th>
-            <th bitCell>{{ "name" | i18n }}</th>
-            <th bitCell>{{ "owner" | i18n }}</th>
-            <th bitCell></th>
-          </tr>
+          <th bitCell></th>
+          <th bitCell>{{ "name" | i18n }}</th>
+          <th bitCell>{{ "owner" | i18n }}</th>
+          <th bitCell></th>
         </ng-container>
-        <tbody>
-          <ng-template body let-rows$>
-            <tr bitRow *ngFor="let r of rows$ | async">
-              <td bitCell>
-                <app-vault-icon [cipher]="r"></app-vault-icon>
-              </td>
-              <td bitCell>
-                <ng-container *ngIf="!organization || canManageCipher(r); else cantManage">
-                  <a
-                    bitLink
-                    href="#"
-                    appStopClick
-                    (click)="selectCipher(r)"
-                    title="{{ 'editItemWithName' | i18n: r.name }}"
-                    >{{ r.name }}</a
-                  >
-                </ng-container>
-                <ng-template #cantManage>
-                  <span>{{ r.name }}</span>
-                </ng-template>
-                <ng-container *ngIf="!organization && r.organizationId">
-                  <i
-                    class="bwi bwi-collection-shared tw-ml-1"
-                    appStopProp
-                    title="{{ 'shared' | i18n }}"
-                    aria-hidden="true"
-                  ></i>
-                  <span class="tw-sr-only">{{ "shared" | i18n }}</span>
-                </ng-container>
-                <ng-container *ngIf="r.hasAttachments">
-                  <i
-                    class="bwi bwi-paperclip tw-ml-1"
-                    appStopProp
-                    title="{{ 'attachments' | i18n }}"
-                    aria-hidden="true"
-                  ></i>
-                  <span class="tw-sr-only">{{ "attachments" | i18n }}</span>
-                </ng-container>
-                <br />
-                <small>{{ r.subTitle }}</small>
-              </td>
-              <td bitCell>
-                <app-org-badge
-                  *ngIf="!organization"
-                  [disabled]="disabled"
-                  [organizationId]="r.organizationId"
-                  [organizationName]="r.organizationId | orgNameFromId: (organizations$ | async)"
-                  appStopProp
-                >
-                </app-org-badge>
-              </td>
-              <td bitCell class="tw-text-right">
-                <a
-                  bitBadge
-                  href="{{ cipherDocs.get(r.id) }}"
-                  target="_blank"
-                  rel="noreferrer"
-                  *ngIf="cipherDocs.has(r.id)"
-                >
-                  {{ "instructions" | i18n }}</a
-                >
-              </td>
-            </tr>
-          </ng-template>
-        </tbody></bit-table
-      >
+        <ng-template bitRowDef let-row>
+          <td bitCell>
+            <app-vault-icon [cipher]="row"></app-vault-icon>
+          </td>
+          <td bitCell>
+            <ng-container *ngIf="!organization || canManageCipher(row); else cantManage">
+              <a
+                bitLink
+                href="#"
+                appStopClick
+                (click)="selectCipher(row)"
+                title="{{ 'editItemWithName' | i18n: row.name }}"
+                >{{ row.name }}</a
+              >
+            </ng-container>
+            <ng-template #cantManage>
+              <span>{{ row.name }}</span>
+            </ng-template>
+            <ng-container *ngIf="!organization && row.organizationId">
+              <i
+                class="bwi bwi-collection-shared tw-ml-1"
+                appStopProp
+                title="{{ 'shared' | i18n }}"
+                aria-hidden="true"
+              ></i>
+              <span class="tw-sr-only">{{ "shared" | i18n }}</span>
+            </ng-container>
+            <ng-container *ngIf="row.hasAttachments">
+              <i
+                class="bwi bwi-paperclip tw-ml-1"
+                appStopProp
+                title="{{ 'attachments' | i18n }}"
+                aria-hidden="true"
+              ></i>
+              <span class="tw-sr-only">{{ "attachments" | i18n }}</span>
+            </ng-container>
+            <br />
+            <small>{{ row.subTitle }}</small>
+          </td>
+          <td bitCell>
+            <app-org-badge
+              *ngIf="!organization"
+              [disabled]="disabled"
+              [organizationId]="row.organizationId"
+              [organizationName]="row.organizationId | orgNameFromId: (organizations$ | async)"
+              appStopProp
+            >
+            </app-org-badge>
+          </td>
+          <td bitCell class="tw-text-right">
+            <a
+              bitBadge
+              href="{{ cipherDocs.get(row.id) }}"
+              target="_blank"
+              rel="noreferrer"
+              *ngIf="cipherDocs.has(row.id)"
+            >
+              {{ "instructions" | i18n }}</a
+            >
+          </td>
+        </ng-template>
+      </bit-table-scroll>
     </ng-container>
   </div>
 </bit-container>
diff --git a/apps/web/src/app/dirt/reports/pages/unsecured-websites-report.component.html b/apps/web/src/app/dirt/reports/pages/unsecured-websites-report.component.html
index 5dd11b59999..cc7537333ad 100644
--- a/apps/web/src/app/dirt/reports/pages/unsecured-websites-report.component.html
+++ b/apps/web/src/app/dirt/reports/pages/unsecured-websites-report.component.html
@@ -32,68 +32,63 @@
           </bit-toggle>
         </ng-container>
       </bit-toggle-group>
-      <bit-table [dataSource]="dataSource">
+      <bit-table-scroll [dataSource]="dataSource" [rowSize]="75">
         <ng-container header *ngIf="!isAdminConsoleActive">
-          <tr bitRow>
-            <th bitCell></th>
-            <th bitCell>{{ "name" | i18n }}</th>
-            <th bitCell>{{ "owner" | i18n }}</th>
-            <th bitCell></th>
-          </tr>
+          <th bitCell></th>
+          <th bitCell>{{ "name" | i18n }}</th>
+          <th bitCell>{{ "owner" | i18n }}</th>
         </ng-container>
-        <ng-template body let-rows$>
-          <tr bitRow *ngFor="let r of rows$ | async">
-            <td bitCell>
-              <app-vault-icon [cipher]="r"></app-vault-icon>
-            </td>
-            <td bitCell>
-              <ng-container *ngIf="!organization || canManageCipher(r); else cantManage">
-                <a
-                  bitLink
-                  href="#"
-                  appStopClick
-                  (click)="selectCipher(r)"
-                  title="{{ 'editItemWithName' | i18n: r.name }}"
-                  >{{ r.name }}</a
-                >
-              </ng-container>
-              <ng-template #cantManage>
-                <span>{{ r.name }}</span>
-              </ng-template>
-              <ng-container *ngIf="!organization && r.organizationId">
-                <i
-                  class="bwi bwi-collection-shared tw-ml-1"
-                  appStopProp
-                  title="{{ 'shared' | i18n }}"
-                  aria-hidden="true"
-                ></i>
-                <span class="tw-sr-only">{{ "shared" | i18n }}</span>
-              </ng-container>
-              <ng-container *ngIf="r.hasAttachments">
-                <i
-                  class="bwi bwi-paperclip tw-ml-1"
-                  appStopProp
-                  title="{{ 'attachments' | i18n }}"
-                  aria-hidden="true"
-                ></i>
-                <span class="tw-sr-only">{{ "attachments" | i18n }}</span>
-              </ng-container>
-              <br />
-              <small>{{ r.subTitle }}</small>
-            </td>
-            <td bitCell>
-              <app-org-badge
-                *ngIf="!organization"
-                [disabled]="disabled"
-                [organizationId]="r.organizationId"
-                [organizationName]="r.organizationId | orgNameFromId: (organizations$ | async)"
-                appStopProp
+        <ng-template bitRowDef let-row>
+          <td bitCell>
+            <app-vault-icon [cipher]="row"></app-vault-icon>
+          </td>
+          <td bitCell>
+            <ng-container *ngIf="!organization || canManageCipher(row); else cantManage">
+              <a
+                bitLink
+                href="#"
+                appStopClick
+                (click)="selectCipher(row)"
+                title="{{ 'editItemWithName' | i18n: row.name }}"
+                >{{ row.name }}</a
               >
-              </app-org-badge>
-            </td>
-          </tr>
+            </ng-container>
+            <ng-template #cantManage>
+              <span>{{ row.name }}</span>
+            </ng-template>
+            <ng-container *ngIf="!organization && row.organizationId">
+              <i
+                class="bwi bwi-collection-shared tw-ml-1"
+                appStopProp
+                title="{{ 'shared' | i18n }}"
+                aria-hidden="true"
+              ></i>
+              <span class="tw-sr-only">{{ "shared" | i18n }}</span>
+            </ng-container>
+            <ng-container *ngIf="row.hasAttachments">
+              <i
+                class="bwi bwi-paperclip tw-ml-1"
+                appStopProp
+                title="{{ 'attachments' | i18n }}"
+                aria-hidden="true"
+              ></i>
+              <span class="tw-sr-only">{{ "attachments" | i18n }}</span>
+            </ng-container>
+            <br />
+            <small>{{ row.subTitle }}</small>
+          </td>
+          <td bitCell>
+            <app-org-badge
+              *ngIf="!organization"
+              [disabled]="disabled"
+              [organizationId]="row.organizationId"
+              [organizationName]="row.organizationId | orgNameFromId: (organizations$ | async)"
+              appStopProp
+            >
+            </app-org-badge>
+          </td>
         </ng-template>
-      </bit-table>
+      </bit-table-scroll>
     </ng-container>
   </div>
 </bit-container>
diff --git a/apps/web/src/app/dirt/reports/reports-layout.component.html b/apps/web/src/app/dirt/reports/reports-layout.component.html
index a27556a7aa9..0cb5d304a34 100644
--- a/apps/web/src/app/dirt/reports/reports-layout.component.html
+++ b/apps/web/src/app/dirt/reports/reports-layout.component.html
@@ -2,8 +2,10 @@
 
 <div class="tw-flex tw-flex-wrap tw-gap-4 tw-mt-4">
   <div class="tw-w-full">
-    <a bitButton routerLink="./" *ngIf="!homepage">
-      {{ "backToReports" | i18n }}
-    </a>
+    @if (!homepage) {
+      <a bitButton routerLink="./">
+        {{ "backToReports" | i18n }}
+      </a>
+    }
   </div>
 </div>
diff --git a/apps/web/src/app/dirt/reports/reports-layout.component.ts b/apps/web/src/app/dirt/reports/reports-layout.component.ts
index c2fbf858590..a6d84ccb037 100644
--- a/apps/web/src/app/dirt/reports/reports-layout.component.ts
+++ b/apps/web/src/app/dirt/reports/reports-layout.component.ts
@@ -1,6 +1,6 @@
-import { Component, OnDestroy } from "@angular/core";
+import { Component } from "@angular/core";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 import { NavigationEnd, Router } from "@angular/router";
-import { Subscription } from "rxjs";
 import { filter } from "rxjs/operators";
 
 // FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
@@ -10,20 +10,20 @@ import { filter } from "rxjs/operators";
   templateUrl: "reports-layout.component.html",
   standalone: false,
 })
-export class ReportsLayoutComponent implements OnDestroy {
+export class ReportsLayoutComponent {
   homepage = true;
-  subscription: Subscription;
 
   constructor(router: Router) {
-    this.subscription = router.events
-      .pipe(filter((event) => event instanceof NavigationEnd))
-      // eslint-disable-next-line rxjs-angular/prefer-takeuntil
+    const reportsHomeRoute = "/reports";
+
+    this.homepage = router.url === reportsHomeRoute;
+    router.events
+      .pipe(
+        takeUntilDestroyed(),
+        filter((event) => event instanceof NavigationEnd),
+      )
       .subscribe((event) => {
-        this.homepage = (event as NavigationEnd).url == "/reports";
+        this.homepage = (event as NavigationEnd).url == reportsHomeRoute;
       });
   }
-
-  ngOnDestroy(): void {
-    this.subscription?.unsubscribe();
-  }
 }