move item height info to vault; make item height dynamic based off of compact mode signal

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

@@ -20,7 +20,7 @@
   </div>
   <bit-item-group>
     <cdk-virtual-scroll-viewport
-      [itemSize]="ItemHeight"
+      [itemSize]="ItemHeight()"
       class="tw-overflow-visible [&>.cdk-virtual-scroll-content-wrapper]:[contain:layout_style]"
     >
       <bit-item *cdkVirtualFor="let cipher of ciphers">

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

@@ -1,6 +1,14 @@
 import { ScrollingModule } from "@angular/cdk/scrolling";
 import { CommonModule } from "@angular/common";
-import { booleanAttribute, Component, EventEmitter, Input, Output } from "@angular/core";
+import {
+  booleanAttribute,
+  Component,
+  computed,
+  EventEmitter,
+  inject,
+  Input,
+  Output,
+} from "@angular/core";
 import { Router, RouterLink } from "@angular/router";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
@@ -9,9 +17,8 @@ import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.servi
 import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
 import {
   BadgeModule,
-  BitItemHeight,
-  BitItemHeightClass,
   ButtonModule,
+  DesignSystemService,
   IconButtonModule,
   ItemModule,
   SectionComponent,
@@ -49,8 +56,25 @@ import { ItemMoreOptionsComponent } from "../item-more-options/item-more-options
   standalone: true,
 })
 export class VaultListItemsContainerComponent {
-  protected ItemHeightClass = BitItemHeightClass;
-  protected ItemHeight = BitItemHeight;
+  private designSystemService = inject(DesignSystemService);
+
+  /**
+   * The class used to set the height of a bit item's inner content.
+   */
+  protected readonly ItemHeightClass = `tw-h-[52px]`;
+
+  /**
+   * The height of a bit item in pixels. Includes any margin, padding, or border. Used by the virtual scroll
+   * to estimate how many items can be displayed at once and how large the virtual container should be.
+   * Needs to be updated if the item height or spacing changes.
+   *
+   * Default: 52px + 1px border + 6px bottom margin = 59px
+   *
+   * Compact mode: 52px + 1px border = 53px
+   */
+  protected readonly ItemHeight = computed(() =>
+    this.designSystemService.compactMode() ? 53 : 59,
+  );
 
   /**
    * Timeout used to add a small delay when selecting a cipher to allow for double click to launch

libs/components/src/item/item.component.ts

@@ -11,20 +11,6 @@ import { A11yRowDirective } from "../a11y/a11y-row.directive";
 
 import { ItemActionComponent } from "./item-action.component";
 
-/**
- * The class used to set the height of a bit item's inner content.
- */
-export const BitItemHeightClass = `tw-h-[52px]`;
-
-/**
- * The height of a bit item in pixels. Includes any margin, padding, or border. Used by the virtual scroll
- * to estimate how many items can be displayed at once and how large the virtual container should be.
- * Needs to be updated if the item height or spacing changes.
- *
- * 52px + 6px bottom margin + 1px border = 53px
- */
-export const BitItemHeight = 59;
-
 @Component({
   selector: "bit-item",
   standalone: true,

libs/components/src/item/item.stories.ts

@@ -16,7 +16,7 @@ import { I18nMockService } from "../utils/i18n-mock.service";
 import { ItemActionComponent } from "./item-action.component";
 import { ItemContentComponent } from "./item-content.component";
 import { ItemGroupComponent } from "./item-group.component";
-import { ItemComponent, BitItemHeight, BitItemHeightClass } from "./item.component";
+import { ItemComponent } from "./item.component";
 
 export default {
   title: "Component Library/Item",
@@ -363,14 +363,12 @@ export const VirtualScrolling: Story = {
   render: (_args) => ({
     props: {
       data: Array.from(Array(100000).keys()),
-      itemSize: BitItemHeight,
-      itemClass: BitItemHeightClass,
     },
     template: /*html*/ `
-      <cdk-virtual-scroll-viewport [itemSize]="itemSize" class="tw-h-[500px]">
+      <cdk-virtual-scroll-viewport [itemSize]="59" class="tw-h-[500px]">
         <bit-item-group aria-label="Virtual Scrolling">
           <bit-item *cdkVirtualFor="let item of data">
-            <button bit-item-content [ngClass]="itemClass">
+            <button bit-item-content>
               <i slot="start" class="bwi bwi-globe tw-text-2xl tw-text-muted" aria-hidden="true"></i>
               {{ item }}
             </button>