From a07b072196f975f60854164de8671be534656a4c Mon Sep 17 00:00:00 2001
From: Will Martin <contact@willmartian.com>
Date: Mon, 18 Nov 2024 16:35:49 -0500
Subject: [PATCH] [CL-499][PM-14020] compact mode (#11796)

---
 apps/browser/src/_locales/en/messages.json    |   6 +
 .../layout/popup-compact-mode.service.ts      |  31 +++
 .../popup/layout/popup-footer.component.html  |   4 +-
 .../popup/layout/popup-header.component.html  |   3 +-
 .../popup/layout/popup-layout.stories.ts      |  46 +++-
 .../popup/layout/popup-page.component.html    |   7 +-
 .../popup-tab-navigation.component.html       |   2 +-
 apps/browser/src/popup/app.component.ts       |   4 +
 .../src/popup/services/services.module.ts     |   8 +-
 .../popup/send-v2/send-v2.component.html      |   4 +-
 .../vault-list-items-container.component.html |   4 +-
 .../vault-list-items-container.component.ts   |  27 +-
 .../components/vault/vault-v2.component.html  |   7 +-
 .../settings/appearance-v2.component.html     |   8 +
 .../settings/appearance-v2.component.spec.ts  |   8 +
 .../popup/settings/appearance-v2.component.ts |  21 +-
 libs/components/src/card/card.component.ts    |   2 +-
 .../src/form-field/form-field.component.ts    |   2 +-
 libs/components/src/index.ts                  |   1 +
 libs/components/src/item/index.ts             |   2 -
 .../src/item/item-content.component.ts        |   2 +-
 libs/components/src/item/item.component.html  |  27 +-
 libs/components/src/item/item.component.ts    |  36 ++-
 libs/components/src/item/item.stories.ts      | 257 +++++++++---------
 .../src/section/section.component.ts          |   3 +-
 .../src/shared/compact-mode.service.ts        |  11 +
 libs/components/src/stories/compact-mode.mdx  |  45 +++
 libs/components/tailwind.config.base.js       |   4 +
 28 files changed, 392 insertions(+), 190 deletions(-)
 create mode 100644 apps/browser/src/platform/popup/layout/popup-compact-mode.service.ts
 create mode 100644 libs/components/src/shared/compact-mode.service.ts
 create mode 100644 libs/components/src/stories/compact-mode.mdx

diff --git a/apps/browser/src/_locales/en/messages.json b/apps/browser/src/_locales/en/messages.json
index 38e683c5e01..7ce9ef45d69 100644
--- a/apps/browser/src/_locales/en/messages.json
+++ b/apps/browser/src/_locales/en/messages.json
@@ -4843,5 +4843,11 @@
   },
   "generatedPassword": {
     "message": "Generated password"
+  },
+  "compactMode": {
+    "message": "Compact mode"
+  },
+  "beta": {
+    "message": "Beta"
   }
 }
diff --git a/apps/browser/src/platform/popup/layout/popup-compact-mode.service.ts b/apps/browser/src/platform/popup/layout/popup-compact-mode.service.ts
new file mode 100644
index 00000000000..ffcd2321b15
--- /dev/null
+++ b/apps/browser/src/platform/popup/layout/popup-compact-mode.service.ts
@@ -0,0 +1,31 @@
+import { inject, Injectable } from "@angular/core";
+import { map, Observable } from "rxjs";
+
+import { GlobalStateProvider, KeyDefinition, THEMING_DISK } from "@bitwarden/common/platform/state";
+import { CompactModeService } from "@bitwarden/components";
+
+const COMPACT_MODE = new KeyDefinition<boolean>(THEMING_DISK, "compactMode", {
+  deserializer: (s) => s,
+});
+
+/**
+ * Service to persist Compact Mode to state / user settings.
+ **/
+@Injectable({ providedIn: "root" })
+export class PopupCompactModeService implements CompactModeService {
+  private state = inject(GlobalStateProvider).get(COMPACT_MODE);
+
+  enabled$: Observable<boolean> = this.state.state$.pipe(map((state) => state ?? false));
+
+  init() {
+    this.enabled$.subscribe((enabled) => {
+      enabled
+        ? document.body.classList.add("tw-bit-compact")
+        : document.body.classList.remove("tw-bit-compact");
+    });
+  }
+
+  async setEnabled(enabled: boolean) {
+    await this.state.update(() => enabled);
+  }
+}
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 f60964b1393..50ad535c891 100644
--- a/apps/browser/src/platform/popup/layout/popup-footer.component.html
+++ b/apps/browser/src/platform/popup/layout/popup-footer.component.html
@@ -1,7 +1,7 @@
 <footer
-  class="tw-p-4 tw-border-0 tw-border-solid tw-border-t tw-border-secondary-300 tw-bg-background"
+  class="tw-p-3 bit-compact:tw-p-2 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-max-w-screen-sm tw-mx-auto tw-flex tw-justify-between tw-w-full tw-items-center">
     <div class="tw-flex tw-justify-start tw-gap-2">
       <ng-content></ng-content>
     </div>
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 28565bb2357..ac52a630900 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-px-4 tw-py-3 tw-transition-colors tw-duration-200 tw-border-0 tw-border-b tw-border-solid"
+  class="tw-p-3 bit-compact:tw-p-2 tw-pl-4 bit-compact:tw-pl-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(),
@@ -10,6 +10,7 @@
   <div class="tw-max-w-screen-sm tw-mx-auto tw-flex tw-justify-between tw-w-full">
     <div class="tw-inline-flex tw-items-center tw-gap-2 tw-h-9">
       <button
+        class="-tw-ml-1"
         bitIconButton="bwi-back"
         type="button"
         *ngIf="showBackButton"
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 bf53b23c373..5b9417a6a19 100644
--- a/apps/browser/src/platform/popup/layout/popup-layout.stories.ts
+++ b/apps/browser/src/platform/popup/layout/popup-layout.stories.ts
@@ -117,11 +117,7 @@ class MockCurrentAccountComponent {}
 
 @Component({
   selector: "mock-search",
-  template: `
-    <div class="tw-p-4">
-      <bit-search placeholder="Search"> </bit-search>
-    </div>
-  `,
+  template: ` <bit-search placeholder="Search"> </bit-search> `,
   standalone: true,
   imports: [SearchModule],
 })
@@ -410,6 +406,46 @@ export const PopupPageWithFooter: Story = {
   }),
 };
 
+export const CompactMode: Story = {
+  render: (args) => ({
+    props: args,
+    template: /* HTML */ `
+      <div class="tw-flex tw-gap-6 tw-text-main">
+        <div id="regular-example">
+          <p>Relaxed</p>
+          <p class="example-label"></p>
+          <extension-container>
+            <mock-vault-subpage></mock-vault-subpage>
+          </extension-container>
+        </div>
+
+        <div id="compact-example" class="tw-bit-compact">
+          <p>Compact</p>
+          <p class="example-label"></p>
+          <extension-container>
+            <mock-vault-subpage></mock-vault-subpage>
+          </extension-container>
+        </div>
+      </div>
+    `,
+  }),
+  play: async (context) => {
+    const canvasEl = context.canvasElement;
+    const updateLabel = (containerId: string) => {
+      const compact = canvasEl.querySelector(
+        `#${containerId} [data-testid=popup-layout-scroll-region]`,
+      );
+      const label = canvasEl.querySelector(`#${containerId} .example-label`);
+      const percentVisible =
+        100 -
+        Math.round((100 * (compact.scrollHeight - compact.clientHeight)) / compact.scrollHeight);
+      label.textContent = `${percentVisible}% above the fold`;
+    };
+    updateLabel("compact-example");
+    updateLabel("regular-example");
+  },
+};
+
 export const PoppedOut: Story = {
   render: (args) => ({
     props: args,
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 a7d4725d25d..8eefc14ab55 100644
--- a/apps/browser/src/platform/popup/layout/popup-page.component.html
+++ b/apps/browser/src/platform/popup/layout/popup-page.component.html
@@ -2,9 +2,9 @@
 <main class="tw-flex-1 tw-overflow-hidden tw-flex tw-flex-col tw-relative tw-bg-background-alt">
   <div
     #nonScrollable
-    class="tw-transition-colors tw-duration-200 tw-border-0 tw-border-b tw-border-solid"
+    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': loading || nonScrollable.childElementCount === 0,
+      'tw-invisible !tw-p-0': loading || nonScrollable.childElementCount === 0,
       'tw-border-secondary-300': scrolled(),
       'tw-border-transparent': !scrolled(),
     }"
@@ -13,12 +13,13 @@
   </div>
   <div
     class="tw-max-w-screen-sm tw-mx-auto tw-overflow-y-auto tw-flex tw-flex-col tw-w-full tw-h-full tw-styled-scrollbar"
+    data-testid="popup-layout-scroll-region"
     (scroll)="handleScroll($event)"
     [ngClass]="{ 'tw-invisible': loading }"
   >
     <div
       class="tw-max-w-screen-sm tw-mx-auto tw-flex-1 tw-flex tw-flex-col tw-h-full tw-w-full"
-      [ngClass]="{ 'tw-p-3': !disablePadding }"
+      [ngClass]="{ 'tw-p-3 bit-compact:tw-p-2': !disablePadding }"
     >
       <ng-content></ng-content>
     </div>
diff --git a/apps/browser/src/platform/popup/layout/popup-tab-navigation.component.html b/apps/browser/src/platform/popup/layout/popup-tab-navigation.component.html
index a5e08133fe2..e53e8905e69 100644
--- a/apps/browser/src/platform/popup/layout/popup-tab-navigation.component.html
+++ b/apps/browser/src/platform/popup/layout/popup-tab-navigation.component.html
@@ -7,7 +7,7 @@
       <ul class="tw-flex tw-flex-1 tw-mb-0 tw-p-0">
         <li *ngFor="let button of navButtons" class="tw-flex-1 tw-list-none">
           <button
-            class="tw-w-full tw-flex tw-flex-col tw-items-center tw-gap-1 tw-px-0.5 tw-pb-2 tw-pt-3 tw-bg-transparent tw-no-underline hover:tw-no-underline hover:tw-text-primary-600 hover:tw-bg-primary-100 tw-border-2 tw-border-solid tw-border-transparent focus-visible:tw-rounded-lg focus-visible:tw-border-primary-600"
+            class="tw-w-full tw-flex tw-flex-col tw-items-center tw-gap-1 tw-px-0.5 tw-pb-2 bit-compact:tw-pb-1 tw-pt-3 bit-compact:tw-pt-2 tw-bg-transparent tw-no-underline hover:tw-no-underline hover:tw-text-primary-600 hover:tw-bg-primary-100 tw-border-2 tw-border-solid tw-border-transparent focus-visible:tw-rounded-lg focus-visible:tw-border-primary-600"
             [ngClass]="rla.isActive ? 'tw-font-bold tw-text-primary-600' : 'tw-text-muted'"
             [title]="button.label"
             [routerLink]="button.page"
diff --git a/apps/browser/src/popup/app.component.ts b/apps/browser/src/popup/app.component.ts
index f3693e4f8a1..c23da5ca7ce 100644
--- a/apps/browser/src/popup/app.component.ts
+++ b/apps/browser/src/popup/app.component.ts
@@ -24,6 +24,7 @@ import {
 } from "@bitwarden/components";
 
 import { flagEnabled } from "../platform/flags";
+import { PopupCompactModeService } from "../platform/popup/layout/popup-compact-mode.service";
 import { PopupViewCacheService } from "../platform/popup/view-cache/popup-view-cache.service";
 import { initPopupClosedListener } from "../platform/services/popup-view-cache-background.service";
 import { BrowserSendStateService } from "../tools/popup/services/browser-send-state.service";
@@ -42,6 +43,7 @@ import { DesktopSyncVerificationDialogComponent } from "./components/desktop-syn
 })
 export class AppComponent implements OnInit, OnDestroy {
   private viewCacheService = inject(PopupViewCacheService);
+  private compactModeService = inject(PopupCompactModeService);
 
   private lastActivity: Date;
   private activeUserId: UserId;
@@ -96,6 +98,8 @@ export class AppComponent implements OnInit, OnDestroy {
     initPopupClosedListener();
     await this.viewCacheService.init();
 
+    this.compactModeService.init();
+
     // Component states must not persist between closing and reopening the popup, otherwise they become dead objects
     // Clear them aggressively to make sure this doesn't occur
     await this.clearComponentStates();
diff --git a/apps/browser/src/popup/services/services.module.ts b/apps/browser/src/popup/services/services.module.ts
index 919cf8c0b19..c4b79fcae58 100644
--- a/apps/browser/src/popup/services/services.module.ts
+++ b/apps/browser/src/popup/services/services.module.ts
@@ -103,7 +103,7 @@ import {
 } from "@bitwarden/common/vault/abstractions/folder/folder.service.abstraction";
 import { TotpService as TotpServiceAbstraction } from "@bitwarden/common/vault/abstractions/totp.service";
 import { TotpService } from "@bitwarden/common/vault/services/totp.service";
-import { DialogService, ToastService } from "@bitwarden/components";
+import { CompactModeService, DialogService, ToastService } from "@bitwarden/components";
 import { PasswordGenerationServiceAbstraction } from "@bitwarden/generator-legacy";
 import { BiometricStateService, BiometricsService, KeyService } from "@bitwarden/key-management";
 import { PasswordRepromptService } from "@bitwarden/vault";
@@ -123,6 +123,7 @@ import { ChromeMessageSender } from "../../platform/messaging/chrome-message.sen
 /* eslint-enable no-restricted-imports */
 import { OffscreenDocumentService } from "../../platform/offscreen-document/abstractions/offscreen-document";
 import { DefaultOffscreenDocumentService } from "../../platform/offscreen-document/offscreen-document.service";
+import { PopupCompactModeService } from "../../platform/popup/layout/popup-compact-mode.service";
 import { BrowserFileDownloadService } from "../../platform/popup/services/browser-file-download.service";
 import { PopupViewCacheService } from "../../platform/popup/view-cache/popup-view-cache.service";
 import { ScriptInjectorService } from "../../platform/services/abstractions/script-injector.service";
@@ -581,6 +582,11 @@ const safeProviders: SafeProvider[] = [
     useClass: ExtensionAnonLayoutWrapperDataService,
     deps: [],
   }),
+  safeProvider({
+    provide: CompactModeService,
+    useExisting: PopupCompactModeService,
+    deps: [],
+  }),
 ];
 
 @NgModule({
diff --git a/apps/browser/src/tools/popup/send-v2/send-v2.component.html b/apps/browser/src/tools/popup/send-v2/send-v2.component.html
index c0178143329..d51bda45b55 100644
--- a/apps/browser/src/tools/popup/send-v2/send-v2.component.html
+++ b/apps/browser/src/tools/popup/send-v2/send-v2.component.html
@@ -6,7 +6,7 @@
       <app-current-account></app-current-account>
     </ng-container>
   </popup-header>
-  <div slot="above-scroll-area" class="tw-p-4" *ngIf="!(sendsLoading$ | async)">
+  <ng-container slot="above-scroll-area" *ngIf="!(sendsLoading$ | async)">
     <bit-callout *ngIf="sendsDisabled" [title]="'sendDisabled' | i18n">
       {{ "sendDisabledWarning" | i18n }}
     </bit-callout>
@@ -14,7 +14,7 @@
       <tools-send-search></tools-send-search>
       <app-send-list-filters></app-send-list-filters>
     </ng-container>
-  </div>
+  </ng-container>
 
   <div
     *ngIf="listState === sendState.Empty"
diff --git a/apps/browser/src/vault/popup/components/vault-v2/vault-list-items-container/vault-list-items-container.component.html b/apps/browser/src/vault/popup/components/vault-v2/vault-list-items-container/vault-list-items-container.component.html
index 6be64b17d77..a493ea2171c 100644
--- a/apps/browser/src/vault/popup/components/vault-v2/vault-list-items-container/vault-list-items-container.component.html
+++ b/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$ | async"
       class="tw-overflow-visible [&>.cdk-virtual-scroll-content-wrapper]:[contain:layout_style]"
     >
       <bit-item *cdkVirtualFor="let cipher of ciphers">
@@ -30,7 +30,7 @@
           (click)="onViewCipher(cipher)"
           (dblclick)="launchCipher(cipher)"
           [appA11yTitle]="'viewItemTitle' | i18n: cipher.name"
-          class="{{ ItemHeightClass }}"
+          class="{{ itemHeightClass }}"
         >
           <app-vault-icon slot="start" [cipher]="cipher"></app-vault-icon>
           <span data-testid="item-name">{{ cipher.name }}</span>
diff --git a/apps/browser/src/vault/popup/components/vault-v2/vault-list-items-container/vault-list-items-container.component.ts b/apps/browser/src/vault/popup/components/vault-v2/vault-list-items-container/vault-list-items-container.component.ts
index 653255ac78d..fa2c8a440e0 100644
--- a/apps/browser/src/vault/popup/components/vault-v2/vault-list-items-container/vault-list-items-container.component.ts
+++ b/apps/browser/src/vault/popup/components/vault-v2/vault-list-items-container/vault-list-items-container.component.ts
@@ -1,7 +1,8 @@
 import { ScrollingModule } from "@angular/cdk/scrolling";
 import { CommonModule } from "@angular/common";
-import { booleanAttribute, Component, EventEmitter, Input, Output } from "@angular/core";
+import { booleanAttribute, Component, EventEmitter, inject, Input, Output } from "@angular/core";
 import { Router, RouterLink } from "@angular/router";
+import { map } from "rxjs";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
@@ -9,9 +10,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,
+  CompactModeService,
   IconButtonModule,
   ItemModule,
   SectionComponent,
@@ -49,8 +49,25 @@ import { ItemMoreOptionsComponent } from "../item-more-options/item-more-options
   standalone: true,
 })
 export class VaultListItemsContainerComponent {
-  protected ItemHeightClass = BitItemHeightClass;
-  protected ItemHeight = BitItemHeight;
+  private compactModeService = inject(CompactModeService);
+
+  /**
+   * 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$ = this.compactModeService.enabled$.pipe(
+    map((enabled) => (enabled ? 53 : 59)),
+  );
 
   /**
    * Timeout used to add a small delay when selecting a cipher to allow for double click to launch
diff --git a/apps/browser/src/vault/popup/components/vault/vault-v2.component.html b/apps/browser/src/vault/popup/components/vault/vault-v2.component.html
index 8c651e882c5..9eba5f8f906 100644
--- a/apps/browser/src/vault/popup/components/vault/vault-v2.component.html
+++ b/apps/browser/src/vault/popup/components/vault/vault-v2.component.html
@@ -23,14 +23,13 @@
   </div>
 
   <!-- Show search & filters outside of the scroll area of the page -->
-  <div
+  <ng-container
     slot="above-scroll-area"
-    class="tw-p-4"
     *ngIf="vaultState !== VaultStateEnum.Empty && !(loading$ | async)"
   >
     <app-vault-v2-search> </app-vault-v2-search>
     <app-vault-list-filters></app-vault-list-filters>
-  </div>
+  </ng-container>
 
   <ng-container *ngIf="vaultState !== VaultStateEnum.Empty">
     <div
@@ -61,7 +60,7 @@
     <div
       *ngIf="vaultState === null"
       cdkVirtualScrollingElement
-      class="tw-h-full tw-p-3 tw-styled-scrollbar"
+      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
diff --git a/apps/browser/src/vault/popup/settings/appearance-v2.component.html b/apps/browser/src/vault/popup/settings/appearance-v2.component.html
index b267e1c5cb2..466cffa216a 100644
--- a/apps/browser/src/vault/popup/settings/appearance-v2.component.html
+++ b/apps/browser/src/vault/popup/settings/appearance-v2.component.html
@@ -18,6 +18,14 @@
         </bit-select>
       </bit-form-field>
 
+      <bit-form-control>
+        <input bitCheckbox formControlName="enableCompactMode" type="checkbox" />
+        <bit-label
+          >{{ "compactMode" | i18n }}
+          <span bitBadge variant="warning">{{ "beta" | i18n }}</span></bit-label
+        >
+      </bit-form-control>
+
       <bit-form-control>
         <input bitCheckbox formControlName="enableBadgeCounter" type="checkbox" />
         <bit-label>{{ "showNumberOfAutofillSuggestions" | i18n }}</bit-label>
diff --git a/apps/browser/src/vault/popup/settings/appearance-v2.component.spec.ts b/apps/browser/src/vault/popup/settings/appearance-v2.component.spec.ts
index bbd210b65a3..b2da3245b5c 100644
--- a/apps/browser/src/vault/popup/settings/appearance-v2.component.spec.ts
+++ b/apps/browser/src/vault/popup/settings/appearance-v2.component.spec.ts
@@ -13,6 +13,7 @@ import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/pl
 import { ThemeType } from "@bitwarden/common/platform/enums";
 import { ThemeStateService } from "@bitwarden/common/platform/theming/theme-state.service";
 
+import { PopupCompactModeService } from "../../../platform/popup/layout/popup-compact-mode.service";
 import { PopupHeaderComponent } from "../../../platform/popup/layout/popup-header.component";
 import { PopupPageComponent } from "../../../platform/popup/layout/popup-page.component";
 
@@ -43,10 +44,12 @@ describe("AppearanceV2Component", () => {
   const enableBadgeCounter$ = new BehaviorSubject<boolean>(true);
   const selectedTheme$ = new BehaviorSubject<ThemeType>(ThemeType.Nord);
   const enableRoutingAnimation$ = new BehaviorSubject<boolean>(true);
+  const enableCompactMode$ = new BehaviorSubject<boolean>(false);
   const setSelectedTheme = jest.fn().mockResolvedValue(undefined);
   const setShowFavicons = jest.fn().mockResolvedValue(undefined);
   const setEnableBadgeCounter = jest.fn().mockResolvedValue(undefined);
   const setEnableRoutingAnimation = jest.fn().mockResolvedValue(undefined);
+  const setEnableCompactMode = jest.fn().mockResolvedValue(undefined);
 
   beforeEach(async () => {
     setSelectedTheme.mockClear();
@@ -71,6 +74,10 @@ describe("AppearanceV2Component", () => {
           provide: BadgeSettingsServiceAbstraction,
           useValue: { enableBadgeCounter$, setEnableBadgeCounter },
         },
+        {
+          provide: PopupCompactModeService,
+          useValue: { enabled$: enableCompactMode$, setEnabled: setEnableCompactMode },
+        },
       ],
     })
       .overrideComponent(AppearanceV2Component, {
@@ -94,6 +101,7 @@ describe("AppearanceV2Component", () => {
       enableFavicon: true,
       enableBadgeCounter: true,
       theme: ThemeType.Nord,
+      enableCompactMode: false,
     });
   });
 
diff --git a/apps/browser/src/vault/popup/settings/appearance-v2.component.ts b/apps/browser/src/vault/popup/settings/appearance-v2.component.ts
index 9d600ec83e8..c20bc48bfea 100644
--- a/apps/browser/src/vault/popup/settings/appearance-v2.component.ts
+++ b/apps/browser/src/vault/popup/settings/appearance-v2.component.ts
@@ -1,5 +1,5 @@
 import { CommonModule } from "@angular/common";
-import { Component, DestroyRef, OnInit } from "@angular/core";
+import { Component, DestroyRef, inject, OnInit } from "@angular/core";
 import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 import { FormBuilder, ReactiveFormsModule } from "@angular/forms";
 import { firstValueFrom } from "rxjs";
@@ -12,12 +12,13 @@ import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.servic
 import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
 import { ThemeType } from "@bitwarden/common/platform/enums";
 import { ThemeStateService } from "@bitwarden/common/platform/theming/theme-state.service";
-import { CheckboxModule } from "@bitwarden/components";
+import { BadgeModule, CheckboxModule } from "@bitwarden/components";
 
 import { CardComponent } from "../../../../../../libs/components/src/card/card.component";
 import { FormFieldModule } from "../../../../../../libs/components/src/form-field/form-field.module";
 import { SelectModule } from "../../../../../../libs/components/src/select/select.module";
 import { PopOutComponent } from "../../../platform/popup/components/pop-out.component";
+import { PopupCompactModeService } from "../../../platform/popup/layout/popup-compact-mode.service";
 import { PopupHeaderComponent } from "../../../platform/popup/layout/popup-header.component";
 import { PopupPageComponent } from "../../../platform/popup/layout/popup-page.component";
 
@@ -35,14 +36,18 @@ import { PopupPageComponent } from "../../../platform/popup/layout/popup-page.co
     SelectModule,
     ReactiveFormsModule,
     CheckboxModule,
+    BadgeModule,
   ],
 })
 export class AppearanceV2Component implements OnInit {
+  private compactModeService = inject(PopupCompactModeService);
+
   appearanceForm = this.formBuilder.group({
     enableFavicon: false,
     enableBadgeCounter: true,
     theme: ThemeType.System,
     enableAnimations: true,
+    enableCompactMode: false,
   });
 
   /** To avoid flashes of inaccurate values, only show the form after the entire form is populated. */
@@ -75,6 +80,7 @@ export class AppearanceV2Component implements OnInit {
     const enableAnimations = await firstValueFrom(
       this.animationControlService.enableRoutingAnimation$,
     );
+    const enableCompactMode = await firstValueFrom(this.compactModeService.enabled$);
 
     // Set initial values for the form
     this.appearanceForm.setValue({
@@ -82,6 +88,7 @@ export class AppearanceV2Component implements OnInit {
       enableBadgeCounter,
       theme,
       enableAnimations,
+      enableCompactMode,
     });
 
     this.formLoading = false;
@@ -109,6 +116,12 @@ export class AppearanceV2Component implements OnInit {
       .subscribe((enableBadgeCounter) => {
         void this.updateAnimations(enableBadgeCounter);
       });
+
+    this.appearanceForm.controls.enableCompactMode.valueChanges
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe((enableCompactMode) => {
+        void this.updateCompactMode(enableCompactMode);
+      });
   }
 
   async updateFavicon(enableFavicon: boolean) {
@@ -127,4 +140,8 @@ export class AppearanceV2Component implements OnInit {
   async updateAnimations(enableAnimations: boolean) {
     await this.animationControlService.setEnableRoutingAnimation(enableAnimations);
   }
+
+  async updateCompactMode(enableCompactMode: boolean) {
+    await this.compactModeService.setEnabled(enableCompactMode);
+  }
 }
diff --git a/libs/components/src/card/card.component.ts b/libs/components/src/card/card.component.ts
index 9a6520829b3..37756088e0d 100644
--- a/libs/components/src/card/card.component.ts
+++ b/libs/components/src/card/card.component.ts
@@ -9,7 +9,7 @@ import { ChangeDetectionStrategy, Component } from "@angular/core";
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: {
     class:
-      "tw-box-border tw-block tw-bg-background tw-text-main tw-border-solid tw-border-b tw-border-0 tw-border-b-secondary-300 [&:not(bit-layout_*)]:tw-rounded-lg [&:not(bit-layout_*)]:tw-border-b-shadow tw-py-4 tw-px-3",
+      "tw-box-border tw-block tw-bg-background tw-text-main tw-border-solid tw-border-b tw-border-0 tw-border-b-secondary-300 [&:not(bit-layout_*)]:tw-rounded-lg [&:not(bit-layout_*)]:tw-border-b-shadow tw-py-4 bit-compact:tw-py-3 tw-px-3 bit-compact:tw-px-2",
   },
 })
 export class CardComponent {}
diff --git a/libs/components/src/form-field/form-field.component.ts b/libs/components/src/form-field/form-field.component.ts
index d8bd498e4f0..9936d2eb43e 100644
--- a/libs/components/src/form-field/form-field.component.ts
+++ b/libs/components/src/form-field/form-field.component.ts
@@ -70,7 +70,7 @@ export class BitFormFieldComponent implements AfterContentChecked {
   @HostBinding("class")
   get classList() {
     return ["tw-block"]
-      .concat(this.disableMargin ? [] : ["tw-mb-4"])
+      .concat(this.disableMargin ? [] : ["tw-mb-4", "bit-compact:tw-mb-3"])
       .concat(this.readOnly ? [] : "tw-pt-2");
   }
 
diff --git a/libs/components/src/index.ts b/libs/components/src/index.ts
index 810f32bdd3c..a48750a99ff 100644
--- a/libs/components/src/index.ts
+++ b/libs/components/src/index.ts
@@ -31,6 +31,7 @@ export * from "./radio-button";
 export * from "./search";
 export * from "./section";
 export * from "./select";
+export * from "./shared/compact-mode.service";
 export * from "./table";
 export * from "./tabs";
 export * from "./toast";
diff --git a/libs/components/src/item/index.ts b/libs/components/src/item/index.ts
index 3d65fdb8e05..56896cdc3c6 100644
--- a/libs/components/src/item/index.ts
+++ b/libs/components/src/item/index.ts
@@ -1,3 +1 @@
 export * from "./item.module";
-
-export { BitItemHeight, BitItemHeightClass } from "./item.component";
diff --git a/libs/components/src/item/item-content.component.ts b/libs/components/src/item/item-content.component.ts
index 5c1b464de93..794698aefd2 100644
--- a/libs/components/src/item/item-content.component.ts
+++ b/libs/components/src/item/item-content.component.ts
@@ -17,7 +17,7 @@ import { TypographyModule } from "../typography";
   templateUrl: `item-content.component.html`,
   host: {
     class:
-      "fvw-target tw-outline-none tw-text-main hover:tw-text-main tw-no-underline hover:tw-no-underline tw-text-base tw-py-2 tw-px-4 tw-bg-transparent tw-w-full tw-border-none tw-flex tw-gap-4 tw-items-center tw-justify-between",
+      "fvw-target tw-outline-none tw-text-main hover:tw-text-main tw-no-underline hover:tw-no-underline tw-text-base tw-py-2 tw-px-4 bit-compact:tw-py-1.5 bit-compact:tw-px-2 tw-bg-transparent tw-w-full tw-border-none tw-flex tw-gap-4 tw-items-center tw-justify-between",
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
diff --git a/libs/components/src/item/item.component.html b/libs/components/src/item/item.component.html
index abfcad7878c..812d6b0315b 100644
--- a/libs/components/src/item/item.component.html
+++ b/libs/components/src/item/item.component.html
@@ -1,20 +1,11 @@
-<div
-  class="tw-box-border tw-overflow-auto tw-flex tw-bg-background [&:has(.item-main-content_button:hover,.item-main-content_a:hover)]:tw-cursor-pointer [&:has(.item-main-content_button:hover,.item-main-content_a:hover)]:tw-bg-primary-100 tw-text-main tw-border-solid tw-border-b tw-border-0 [&:not(bit-layout_*)]:tw-rounded-lg tw-mb-1.5"
-  [ngClass]="
-    focusVisibleWithin()
-      ? 'tw-z-10 tw-rounded tw-outline-none tw-ring-2 tw-ring-primary-600 tw-border-transparent'
-      : 'tw-border-b-shadow'
-  "
->
-  <bit-item-action class="item-main-content tw-block tw-flex-1 tw-overflow-hidden">
-    <ng-content></ng-content>
-  </bit-item-action>
+<bit-item-action class="item-main-content tw-flex tw-flex-1 tw-overflow-hidden">
+  <ng-content></ng-content>
+</bit-item-action>
 
-  <div
-    #endSlot
-    class="tw-p-2 tw-flex tw-gap-1 tw-items-center"
-    [hidden]="endSlot.childElementCount === 0"
-  >
-    <ng-content select="[slot=end]"></ng-content>
-  </div>
+<div
+  #endSlot
+  class="tw-p-2 tw-flex tw-gap-1 tw-items-center"
+  [hidden]="endSlot.childElementCount === 0"
+>
+  <ng-content select="[slot=end]"></ng-content>
 </div>
diff --git a/libs/components/src/item/item.component.ts b/libs/components/src/item/item.component.ts
index 5ce421e980b..833949ddb96 100644
--- a/libs/components/src/item/item.component.ts
+++ b/libs/components/src/item/item.component.ts
@@ -1,24 +1,16 @@
 import { CommonModule } from "@angular/common";
-import { ChangeDetectionStrategy, Component, HostListener, signal } from "@angular/core";
+import {
+  ChangeDetectionStrategy,
+  Component,
+  HostBinding,
+  HostListener,
+  signal,
+} from "@angular/core";
 
 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 = 59px
- */
-export const BitItemHeight = 59;
-
 @Component({
   selector: "bit-item",
   standalone: true,
@@ -26,6 +18,10 @@ export const BitItemHeight = 59;
   changeDetection: ChangeDetectionStrategy.OnPush,
   templateUrl: "item.component.html",
   providers: [{ provide: A11yRowDirective, useExisting: ItemComponent }],
+  host: {
+    class:
+      "tw-block tw-box-border tw-overflow-auto tw-flex tw-bg-background [&:has(.item-main-content_button:hover,.item-main-content_a:hover)]:tw-cursor-pointer [&:has(.item-main-content_button:hover,.item-main-content_a:hover)]:tw-bg-primary-100 tw-text-main tw-border-solid tw-border-b tw-border-0 [&:not(bit-layout_*)]:tw-rounded-lg bit-compact:[&:not(bit-layout_*)]:tw-rounded-none bit-compact:[&:not(bit-layout_*)]:last-of-type:tw-rounded-b-lg bit-compact:[&:not(bit-layout_*)]:first-of-type:tw-rounded-t-lg tw-min-h-9 tw-mb-1.5 bit-compact:tw-mb-0",
+  },
 })
 export class ItemComponent extends A11yRowDirective {
   /**
@@ -40,4 +36,14 @@ export class ItemComponent extends A11yRowDirective {
   onFocusOut() {
     this.focusVisibleWithin.set(false);
   }
+
+  @HostBinding("class") get classList(): string[] {
+    return [
+      this.focusVisibleWithin()
+        ? "tw-z-10 tw-rounded tw-outline-none tw-ring-2 bit-compact:tw-ring-inset tw-ring-primary-600 tw-border-transparent".split(
+            " ",
+          )
+        : "tw-border-b-shadow",
+    ].flat();
+  }
 }
diff --git a/libs/components/src/item/item.stories.ts b/libs/components/src/item/item.stories.ts
index 15fef56dd1c..675172565f1 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, BitItemHeight, BitItemHeightClass } from "./item.component";
+import { ItemComponent } from "./item.component";
 
 export default {
   title: "Component Library/Item",
@@ -152,127 +152,129 @@ export const TextOverflow: Story = {
   }),
 };
 
+const multipleActionListTemplate = /*html*/ `
+  <bit-item-group aria-label="Multiple Action List">
+    <bit-item>
+      <button bit-item-content>
+        <i slot="start" class="bwi bwi-globe tw-text-2xl tw-text-muted" aria-hidden="true"></i>
+        Foo
+        <span slot="secondary">Bar</span>
+      </button>
+
+      <ng-container slot="end">
+        <bit-item-action>
+          <button type="button" bitBadge variant="primary">Auto-fill</button>
+        </bit-item-action>
+        <bit-item-action>
+          <button type="button" bitIconButton="bwi-clone" size="small"></button>
+        </bit-item-action>
+        <bit-item-action>
+          <button type="button" bitIconButton="bwi-ellipsis-v" size="small"></button>
+        </bit-item-action>
+      </ng-container>
+    </bit-item>
+    <bit-item>
+      <button bit-item-content>
+        <i slot="start" class="bwi bwi-globe tw-text-2xl tw-text-muted" aria-hidden="true"></i>
+        Foo
+        <span slot="secondary">Bar</span>
+      </button>
+
+      <ng-container slot="end">
+        <bit-item-action>
+          <button type="button" bitBadge variant="primary">Auto-fill</button>
+        </bit-item-action>
+        <bit-item-action>
+          <button type="button" bitIconButton="bwi-clone" size="small"></button>
+        </bit-item-action>
+        <bit-item-action>
+          <button type="button" bitIconButton="bwi-ellipsis-v" size="small"></button>
+        </bit-item-action>
+      </ng-container>
+    </bit-item>
+    <bit-item>
+      <button bit-item-content>
+        <i slot="start" class="bwi bwi-globe tw-text-2xl tw-text-muted" aria-hidden="true"></i>
+        Foo
+        <span slot="secondary">Bar</span>
+      </button>
+
+      <ng-container slot="end">
+        <bit-item-action>
+          <button type="button" bitBadge variant="primary">Auto-fill</button>
+        </bit-item-action>
+        <bit-item-action>
+          <button type="button" bitIconButton="bwi-clone" size="small"></button>
+        </bit-item-action>
+        <bit-item-action>
+          <button type="button" bitIconButton="bwi-ellipsis-v" size="small"></button>
+        </bit-item-action>
+      </ng-container>
+    </bit-item>
+    <bit-item>
+      <button bit-item-content>
+        <i slot="start" class="bwi bwi-globe tw-text-2xl tw-text-muted" aria-hidden="true"></i>
+        Foo
+        <span slot="secondary">Bar</span>
+      </button>
+
+      <ng-container slot="end">
+        <bit-item-action>
+          <button type="button" bitBadge variant="primary">Auto-fill</button>
+        </bit-item-action>
+        <bit-item-action>
+          <button type="button" bitIconButton="bwi-clone" size="small"></button>
+        </bit-item-action>
+        <bit-item-action>
+          <button type="button" bitIconButton="bwi-ellipsis-v" size="small"></button>
+        </bit-item-action>
+      </ng-container>
+    </bit-item>
+    <bit-item>
+      <button bit-item-content>
+        <i slot="start" class="bwi bwi-globe tw-text-2xl tw-text-muted" aria-hidden="true"></i>
+        Foo
+        <span slot="secondary">Bar</span>
+      </button>
+
+      <ng-container slot="end">
+        <bit-item-action>
+          <button type="button" bitBadge variant="primary">Auto-fill</button>
+        </bit-item-action>
+        <bit-item-action>
+          <button type="button" bitIconButton="bwi-clone" size="small"></button>
+        </bit-item-action>
+        <bit-item-action>
+          <button type="button" bitIconButton="bwi-ellipsis-v" size="small"></button>
+        </bit-item-action>
+      </ng-container>
+    </bit-item>
+    <bit-item>
+      <button bit-item-content>
+        <i slot="start" class="bwi bwi-globe tw-text-2xl tw-text-muted" aria-hidden="true"></i>
+        Foo
+        <span slot="secondary">Bar</span>
+      </button>
+
+      <ng-container slot="end">
+        <bit-item-action>
+          <button type="button" bitBadge variant="primary">Auto-fill</button>
+        </bit-item-action>
+        <bit-item-action>
+          <button type="button" bitIconButton="bwi-clone" size="small"></button>
+        </bit-item-action>
+        <bit-item-action>
+          <button type="button" bitIconButton="bwi-ellipsis-v" size="small"></button>
+        </bit-item-action>
+      </ng-container>
+    </bit-item>
+  </bit-item-group>
+`;
+
 export const MultipleActionList: Story = {
   render: (args) => ({
     props: args,
-    template: /*html*/ `
-      <bit-item-group aria-label="Multiple Action List">
-        <bit-item>
-          <button bit-item-content>
-            <i slot="start" class="bwi bwi-globe tw-text-2xl tw-text-muted" aria-hidden="true"></i>
-            Foo
-            <span slot="secondary">Bar</span>
-          </button>
-
-          <ng-container slot="end">
-            <bit-item-action>
-              <button type="button" bitBadge variant="primary">Auto-fill</button>
-            </bit-item-action>
-            <bit-item-action>
-              <button type="button" bitIconButton="bwi-clone" size="small"></button>
-            </bit-item-action>
-            <bit-item-action>
-              <button type="button" bitIconButton="bwi-ellipsis-v" size="small"></button>
-            </bit-item-action>
-          </ng-container>
-        </bit-item>
-        <bit-item>
-          <button bit-item-content>
-            <i slot="start" class="bwi bwi-globe tw-text-2xl tw-text-muted" aria-hidden="true"></i>
-            Foo
-            <span slot="secondary">Bar</span>
-          </button>
-
-          <ng-container slot="end">
-            <bit-item-action>
-              <button type="button" bitBadge variant="primary">Auto-fill</button>
-            </bit-item-action>
-            <bit-item-action>
-              <button type="button" bitIconButton="bwi-clone" size="small"></button>
-            </bit-item-action>
-            <bit-item-action>
-              <button type="button" bitIconButton="bwi-ellipsis-v" size="small"></button>
-            </bit-item-action>
-          </ng-container>
-        </bit-item>
-        <bit-item>
-          <button bit-item-content>
-            <i slot="start" class="bwi bwi-globe tw-text-2xl tw-text-muted" aria-hidden="true"></i>
-            Foo
-            <span slot="secondary">Bar</span>
-          </button>
-
-          <ng-container slot="end">
-            <bit-item-action>
-              <button type="button" bitBadge variant="primary">Auto-fill</button>
-            </bit-item-action>
-            <bit-item-action>
-              <button type="button" bitIconButton="bwi-clone" size="small"></button>
-            </bit-item-action>
-            <bit-item-action>
-              <button type="button" bitIconButton="bwi-ellipsis-v" size="small"></button>
-            </bit-item-action>
-          </ng-container>
-        </bit-item>
-        <bit-item>
-          <button bit-item-content>
-            <i slot="start" class="bwi bwi-globe tw-text-2xl tw-text-muted" aria-hidden="true"></i>
-            Foo
-            <span slot="secondary">Bar</span>
-          </button>
-
-          <ng-container slot="end">
-            <bit-item-action>
-              <button type="button" bitBadge variant="primary">Auto-fill</button>
-            </bit-item-action>
-            <bit-item-action>
-              <button type="button" bitIconButton="bwi-clone" size="small"></button>
-            </bit-item-action>
-            <bit-item-action>
-              <button type="button" bitIconButton="bwi-ellipsis-v" size="small"></button>
-            </bit-item-action>
-          </ng-container>
-        </bit-item>
-        <bit-item>
-          <button bit-item-content>
-            <i slot="start" class="bwi bwi-globe tw-text-2xl tw-text-muted" aria-hidden="true"></i>
-            Foo
-            <span slot="secondary">Bar</span>
-          </button>
-
-          <ng-container slot="end">
-            <bit-item-action>
-              <button type="button" bitBadge variant="primary">Auto-fill</button>
-            </bit-item-action>
-            <bit-item-action>
-              <button type="button" bitIconButton="bwi-clone" size="small"></button>
-            </bit-item-action>
-            <bit-item-action>
-              <button type="button" bitIconButton="bwi-ellipsis-v" size="small"></button>
-            </bit-item-action>
-          </ng-container>
-        </bit-item>
-        <bit-item>
-          <button bit-item-content>
-            <i slot="start" class="bwi bwi-globe tw-text-2xl tw-text-muted" aria-hidden="true"></i>
-            Foo
-            <span slot="secondary">Bar</span>
-          </button>
-
-          <ng-container slot="end">
-            <bit-item-action>
-              <button type="button" bitBadge variant="primary">Auto-fill</button>
-            </bit-item-action>
-            <bit-item-action>
-              <button type="button" bitIconButton="bwi-clone" size="small"></button>
-            </bit-item-action>
-            <bit-item-action>
-              <button type="button" bitIconButton="bwi-ellipsis-v" size="small"></button>
-            </bit-item-action>
-          </ng-container>
-        </bit-item>
-      </bit-item-group>
-    `,
+    template: multipleActionListTemplate,
   }),
 };
 
@@ -346,18 +348,27 @@ export const SingleActionWithBadge: Story = {
   }),
 };
 
+export const CompactMode: Story = {
+  render: (args) => ({
+    props: args,
+    template: /*html*/ `
+    <div class="tw-bit-compact">
+      ${multipleActionListTemplate}
+    </div>
+    `,
+  }),
+};
+
 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>
diff --git a/libs/components/src/section/section.component.ts b/libs/components/src/section/section.component.ts
index 2b52c97bba2..ec34c804119 100644
--- a/libs/components/src/section/section.component.ts
+++ b/libs/components/src/section/section.component.ts
@@ -9,7 +9,8 @@ import { Component, Input } from "@angular/core";
   template: `
     <section
       [ngClass]="{
-        'tw-mb-6 [&:not(bit-dialog_*):not(popup-page_*)]:md:tw-mb-12': !disableMargin,
+        'tw-mb-5 bit-compact:tw-mb-4 [&:not(bit-dialog_*):not(popup-page_*)]:md:tw-mb-12':
+          !disableMargin,
       }"
     >
       <ng-content></ng-content>
diff --git a/libs/components/src/shared/compact-mode.service.ts b/libs/components/src/shared/compact-mode.service.ts
new file mode 100644
index 00000000000..e6cafb12d1a
--- /dev/null
+++ b/libs/components/src/shared/compact-mode.service.ts
@@ -0,0 +1,11 @@
+import { Observable } from "rxjs";
+
+/** Global config for the Bitwarden Design System */
+export abstract class CompactModeService {
+  /**
+   * When true, enables "compact mode".
+   *
+   * Component authors can also hook into compact mode with the `bit-compact:` Tailwind variant.
+   **/
+  enabled$: Observable<boolean>;
+}
diff --git a/libs/components/src/stories/compact-mode.mdx b/libs/components/src/stories/compact-mode.mdx
new file mode 100644
index 00000000000..800bc34cf6a
--- /dev/null
+++ b/libs/components/src/stories/compact-mode.mdx
@@ -0,0 +1,45 @@
+import { Meta, Story } from "@storybook/addon-docs";
+
+import * as itemStories from "../item/item.stories";
+import * as popupLayoutStories from "../../../../apps/browser/src/platform/popup/layout/popup-layout.stories";
+
+<Meta title="Documentation/Compact Mode" />
+
+# Compact Mode
+
+The Bitwarden browser extension has a global compact mode setting for users who prefer a more
+information-dense UI.
+
+## Tailwind
+
+Component authors can hook into this setting with the `bit-compact` Tailwind variant. In the
+following example, the paragraph's padding is reduced when compact mode is enabled.
+
+```html
+<p class="tw-bg-primary-100 tw-p-4 bit-compact:tw-p-0.5">Lorem impsum doggo dolor...</p>
+
+<div class="tw-bit-compact">
+  <p class="tw-bg-primary-100 tw-p-4 bit-compact:tw-p-0.5">Lorem impsum doggo dolor...</p>
+</div>
+```
+
+<p class="tw-bg-primary-100 tw-p-4 bit-compact:tw-p-0.5">Lorem impsum doggo dolor...</p>
+
+<div class="tw-bit-compact">
+  <p class="tw-bg-primary-100 tw-p-4 bit-compact:tw-p-0.5">Lorem impsum doggo dolor...</p>
+</div>
+
+## Service
+
+To get/set compact mode in TypeScript, the `CompactModeService` exposes a `enabled$` observable.
+However, styling with the Tailwind variant should be used when possible as it is more performant.
+
+## Examples
+
+### [Popup Layout](?path=/story/browser-popup-layout--compact-mode)
+
+<Story autoplay={true} of={popupLayoutStories.CompactMode} />
+
+### [Item](?path=/story/component-library-item--compact-mode)
+
+<Story of={itemStories.CompactMode} />
diff --git a/libs/components/tailwind.config.base.js b/libs/components/tailwind.config.base.js
index dbfb6c54272..26616d07156 100644
--- a/libs/components/tailwind.config.base.js
+++ b/libs/components/tailwind.config.base.js
@@ -175,5 +175,9 @@ module.exports = {
         addVariant(state, [`&:${state}`, `&.test-${state}`]);
       }
     }),
+    /** Plugin for compact mode */
+    plugin(function ({ addVariant }) {
+      addVariant("bit-compact", ".bit-compact &");
+    }),
   ],
 };