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

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>