From 18522e5165357a9cb5827e5cbf26f822f569deb4 Mon Sep 17 00:00:00 2001
From: Jared Snider <116684653+JaredSnider-Bitwarden@users.noreply.github.com>
Date: Tue, 8 Oct 2024 14:51:08 -0400
Subject: [PATCH] PM-13252 - AnonLayout - Style tweaks to fix scrollbars on
 browser + add typography to footer content + misc minor refactors. (#11449)

---
 .../angular/anon-layout/anon-layout.component.html  | 13 +++++++------
 .../angular/anon-layout/anon-layout.component.ts    |  8 +++++++-
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/libs/auth/src/angular/anon-layout/anon-layout.component.html b/libs/auth/src/angular/anon-layout/anon-layout.component.html
index aa5ff02965..8a0ac4b718 100644
--- a/libs/auth/src/angular/anon-layout/anon-layout.component.html
+++ b/libs/auth/src/angular/anon-layout/anon-layout.component.html
@@ -5,8 +5,7 @@
     'tw-pt-0': decreaseTopPadding,
     'tw-pt-8': !decreaseTopPadding,
     'tw-min-h-screen': clientType === 'web',
-    'tw-min-h-[calc(100vh-72px)]': clientType === 'browser',
-    'tw-min-h-[calc(100vh-54px)]': clientType === 'desktop',
+    'tw-min-h-full': clientType === 'browser' || clientType === 'desktop',
   }"
 >
   <a *ngIf="!hideLogo" [routerLink]="['/']" class="tw-w-[128px] [&>*]:tw-align-top">
@@ -33,7 +32,7 @@
   </div>
 
   <div
-    class="tw-mb-auto tw-w-full tw-max-w-md tw-mx-auto tw-flex tw-flex-col tw-items-center sm:tw-min-w-[28rem]"
+    class="tw-grow tw-w-full tw-max-w-md tw-mx-auto tw-flex tw-flex-col tw-items-center sm:tw-min-w-[28rem]"
     [ngClass]="{ 'tw-max-w-md': maxWidth === 'md', 'tw-max-w-3xl': maxWidth === '3xl' }"
   >
     <div
@@ -45,13 +44,15 @@
   </div>
 
   <footer *ngIf="!hideFooter" class="tw-text-center">
-    <div *ngIf="showReadonlyHostname">{{ "accessing" | i18n }} {{ hostname }}</div>
+    <div *ngIf="showReadonlyHostname" bitTypography="body2">
+      {{ "accessing" | i18n }} {{ hostname }}
+    </div>
     <ng-container *ngIf="!showReadonlyHostname">
       <ng-content select="[slot=environment-selector]"></ng-content>
     </ng-container>
     <ng-container *ngIf="!hideYearAndVersion">
-      <div>&copy; {{ year }} Bitwarden Inc.</div>
-      <div>{{ version }}</div>
+      <div bitTypography="body2">&copy; {{ year }} Bitwarden Inc.</div>
+      <div bitTypography="body2">{{ version }}</div>
     </ng-container>
   </footer>
 </main>
diff --git a/libs/auth/src/angular/anon-layout/anon-layout.component.ts b/libs/auth/src/angular/anon-layout/anon-layout.component.ts
index ff28f24a93..7da7ef1a7a 100644
--- a/libs/auth/src/angular/anon-layout/anon-layout.component.ts
+++ b/libs/auth/src/angular/anon-layout/anon-layout.component.ts
@@ -1,5 +1,5 @@
 import { CommonModule } from "@angular/common";
-import { Component, Input, OnChanges, OnInit, SimpleChanges } from "@angular/core";
+import { Component, HostBinding, Input, OnChanges, OnInit, SimpleChanges } from "@angular/core";
 import { RouterModule } from "@angular/router";
 import { firstValueFrom } from "rxjs";
 
@@ -19,6 +19,12 @@ import { BitwardenLogo, BitwardenShield } from "../icons";
   imports: [IconModule, CommonModule, TypographyModule, SharedModule, RouterModule],
 })
 export class AnonLayoutComponent implements OnInit, OnChanges {
+  @HostBinding("class")
+  get classList() {
+    // AnonLayout should take up full height of parent container for proper footer placement.
+    return ["tw-h-full"];
+  }
+
   @Input() title: string;
   @Input() subtitle: string;
   @Input() icon: Icon;