[CL-290] make popup layout grow to full height (#9237)

* add tw-h-full to popup layout template

* add story

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>

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>
+    `,
+  }),
+};

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>