From b3ebe370d22139cdbcbb09f3db463f41fed50dbd Mon Sep 17 00:00:00 2001
From: Victoria League <vleague@bitwarden.com>
Date: Tue, 10 Sep 2024 14:16:55 -0400
Subject: [PATCH] [CL-445] Fix small sizing and spacing issues (#10962)

---
 .../src/platform/popup/layout/popup-footer.component.html | 2 +-
 .../src/platform/popup/layout/popup-header.component.html | 2 +-
 libs/components/src/item/item.component.ts                | 6 +++---
 libs/components/src/item/item.stories.ts                  | 8 +++++---
 4 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/apps/browser/src/platform/popup/layout/popup-footer.component.html b/apps/browser/src/platform/popup/layout/popup-footer.component.html
index 777e0ab60da..f60964b1393 100644
--- a/apps/browser/src/platform/popup/layout/popup-footer.component.html
+++ b/apps/browser/src/platform/popup/layout/popup-footer.component.html
@@ -1,5 +1,5 @@
 <footer
-  class="tw-p-3 tw-border-0 tw-border-solid tw-border-t tw-border-secondary-300 tw-bg-background"
+  class="tw-p-4 tw-border-0 tw-border-solid tw-border-t tw-border-secondary-300 tw-bg-background"
 >
   <div class="tw-max-w-screen-sm tw-mx-auto tw-flex tw-justify-between tw-w-full">
     <div class="tw-flex tw-justify-start tw-gap-2">
diff --git a/apps/browser/src/platform/popup/layout/popup-header.component.html b/apps/browser/src/platform/popup/layout/popup-header.component.html
index fefc7154314..5234c6b87e1 100644
--- a/apps/browser/src/platform/popup/layout/popup-header.component.html
+++ b/apps/browser/src/platform/popup/layout/popup-header.component.html
@@ -1,5 +1,5 @@
 <header
-  class="tw-p-4 tw-transition-colors tw-duration-200 tw-border-0 tw-border-b tw-border-solid"
+  class="tw-px-4 tw-py-3 tw-transition-colors tw-duration-200 tw-border-0 tw-border-b tw-border-solid"
   [ngClass]="{
     'tw-bg-background-alt tw-border-transparent':
       this.background === 'alt' && !pageContentScrolled(),
diff --git a/libs/components/src/item/item.component.ts b/libs/components/src/item/item.component.ts
index f566c8e6af3..5ce421e980b 100644
--- a/libs/components/src/item/item.component.ts
+++ b/libs/components/src/item/item.component.ts
@@ -8,16 +8,16 @@ 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-[60px]`;
+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.
  *
- * 60px + 6px bottom margin + 1px border = 67px
+ * 52px + 6px bottom margin + 1px border = 59px
  */
-export const BitItemHeight = 67; //
+export const BitItemHeight = 59;
 
 @Component({
   selector: "bit-item",
diff --git a/libs/components/src/item/item.stories.ts b/libs/components/src/item/item.stories.ts
index 75333082ec8..c0046a5b0da 100644
--- a/libs/components/src/item/item.stories.ts
+++ b/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 } from "./item.component";
+import { ItemComponent, BitItemHeight, BitItemHeightClass } from "./item.component";
 
 export default {
   title: "Component Library/Item",
@@ -326,12 +326,14 @@ export const VirtualScrolling: Story = {
   render: (_args) => ({
     props: {
       data: Array.from(Array(100000).keys()),
+      itemSize: BitItemHeight,
+      itemClass: BitItemHeightClass,
     },
     template: /*html*/ `
-      <cdk-virtual-scroll-viewport [itemSize]="46" class="tw-h-[500px]">
+      <cdk-virtual-scroll-viewport [itemSize]="itemSize" class="tw-h-[500px]">
         <bit-item-group aria-label="Single Action List">
           <bit-item *cdkVirtualFor="let item of data">
-            <button bit-item-content>
+            <button bit-item-content [ngClass]="itemClass">
               <i slot="start" class="bwi bwi-globe tw-text-2xl tw-text-muted" aria-hidden="true"></i>
               {{ item }}
             </button>