From 034227d993aae34977d62049dee7bbc5de438652 Mon Sep 17 00:00:00 2001
From: Will Martin <contact@willmartian.com>
Date: Mon, 20 May 2024 07:38:14 -0400
Subject: [PATCH] [CL-290] make popup layout grow to full height (#9237)

* add tw-h-full to popup layout template

* add story
---
 .../platform/popup/layout/popup-layout.mdx    |  6 +++++
 .../popup/layout/popup-layout.stories.ts      | 26 +++++++++++++++++++
 .../popup/layout/popup-page.component.html    |  4 +--
 3 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/apps/browser/src/platform/popup/layout/popup-layout.mdx b/apps/browser/src/platform/popup/layout/popup-layout.mdx
index 91f7dab277e..6f72f325bf1 100644
--- a/apps/browser/src/platform/popup/layout/popup-layout.mdx
+++ b/apps/browser/src/platform/popup/layout/popup-layout.mdx
@@ -136,3 +136,9 @@ When the browser extension is popped out, the "popout" button should not be pass
 <Canvas>
   <Story of={stories.PoppedOut} />
 </Canvas>
+
+## Centered Content
+
+<Canvas>
+  <Story of={stories.CenteredContent} />
+</Canvas>
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 28692c79e1c..cc7758d9680 100644
--- a/apps/browser/src/platform/popup/layout/popup-layout.stories.ts
+++ b/apps/browser/src/platform/popup/layout/popup-layout.stories.ts
@@ -11,6 +11,7 @@ import {
   I18nMockService,
   IconButtonModule,
   ItemModule,
+  NoItemsModule,
 } from "@bitwarden/components";
 
 import { PopupFooterComponent } from "./popup-footer.component";
@@ -289,6 +290,9 @@ export default {
     moduleMetadata({
       imports: [
         PopupTabNavigationComponent,
+        PopupHeaderComponent,
+        PopupPageComponent,
+        PopupFooterComponent,
         CommonModule,
         RouterModule,
         ExtensionContainerComponent,
@@ -298,6 +302,7 @@ export default {
         MockGeneratorPageComponent,
         MockSettingsPageComponent,
         MockVaultPagePoppedComponent,
+        NoItemsModule,
       ],
       providers: [
         {
@@ -378,3 +383,24 @@ export const PoppedOut: Story = {
     `,
   }),
 };
+
+export const CenteredContent: Story = {
+  render: (args) => ({
+    props: args,
+    template: /* HTML */ `
+      <extension-container>
+        <popup-tab-navigation>
+          <popup-page>
+            <popup-header slot="header" pageTitle="Centered Content"></popup-header>
+            <div class="tw-h-full tw-flex tw-items-center tw-justify-center tw-text-main">
+              <bit-no-items>
+                <ng-container slot="title">Before centering a div</ng-container>
+                <ng-container slot="description">One must first center oneself</ng-container>
+              </bit-no-items>
+            </div>
+          </popup-page>
+        </popup-tab-navigation>
+      </extension-container>
+    `,
+  }),
+};
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 ba871d6319e..ece6be4c63e 100644
--- a/apps/browser/src/platform/popup/layout/popup-page.component.html
+++ b/apps/browser/src/platform/popup/layout/popup-page.component.html
@@ -1,6 +1,6 @@
 <ng-content select="[slot=header]"></ng-content>
-<main class="tw-bg-background-alt tw-p-3 tw-flex-1 tw-overflow-y-auto">
-  <div class="tw-max-w-screen-sm tw-mx-auto">
+<main class="tw-bg-background-alt tw-p-3 tw-flex-1 tw-overflow-y-auto tw-h-full">
+  <div class="tw-max-w-screen-sm tw-mx-auto tw-h-full">
     <ng-content></ng-content>
   </div>
 </main>