fix(angular): Minor UI tweaks

Author: Ehesp

examples/angular/src/app/screens/phone-auth-screen-w-oauth/phone-auth-screen-w-oauth.component.ts

@@ -16,15 +16,17 @@
 
 import { Component } from "@angular/core";
 import { CommonModule } from "@angular/common";
-import { PhoneAuthScreenComponent, GoogleSignInButtonComponent } from "@invertase/firebaseui-angular";
+import { PhoneAuthScreenComponent, GoogleSignInButtonComponent, ContentComponent } from "@invertase/firebaseui-angular";
 
 @Component({
   selector: "app-phone-auth-screen-w-oauth",
   standalone: true,
-  imports: [CommonModule, PhoneAuthScreenComponent, GoogleSignInButtonComponent],
+  imports: [CommonModule, PhoneAuthScreenComponent, GoogleSignInButtonComponent, ContentComponent],
   template: `
     <fui-phone-auth-screen>
-      <fui-google-sign-in-button></fui-google-sign-in-button>
+      <fui-content>
+        <fui-google-sign-in-button></fui-google-sign-in-button>
+      </fui-content>
     </fui-phone-auth-screen>
   `,
   styles: [],

packages/angular/src/lib/auth/forms/mfa/sms-multi-factor-enrollment-form.ts

@@ -65,17 +65,18 @@ import {
               [tanstackField]="phoneForm"
               [label]="displayNameLabel()"
               type="text"
-            ></fui-form-input>
+            />
           </fieldset>
           <fieldset>
-            <fui-country-selector [(value)]="country"></fui-country-selector>
             <fui-form-input
               name="phoneNumber"
               tanstack-app-field
               [tanstackField]="phoneForm"
               [label]="phoneNumberLabel()"
               type="tel"
-            ></fui-form-input>
+            >
+              <fui-country-selector [(value)]="country" ngProjectAs="input-before" />
+            </fui-form-input>
           </fieldset>
           <fieldset>
             <div class="fui-recaptcha-container" #recaptchaContainer></div>

packages/angular/src/lib/auth/forms/phone-auth-form.ts

@@ -56,14 +56,15 @@ import {
   template: `
     <form (submit)="handleSubmit($event)" class="fui-form">
       <fieldset>
-        <fui-country-selector [(value)]="country"></fui-country-selector>
         <fui-form-input
           name="phoneNumber"
           tanstack-app-field
           [tanstackField]="form"
           [label]="phoneNumberLabel()"
           type="tel"
-        ></fui-form-input>
+        >
+          <fui-country-selector [(value)]="country" ngProjectAs="input-before" />
+        </fui-form-input>
       </fieldset>
       <fieldset>
         <div class="fui-recaptcha-container" #recaptchaContainer></div>