[CL-927] anon layout header actions slot (#17796)

* add a slot for consumers to show user actions in anon layout header

* remove commented code

* ensure logo stays top aligned

* switch to dashed naming

* fix ngif statements

* remove empty selector

* remove unnecessary containers

* use smaller logo on smaller screens

* remove commented code from extension layout

* remove dupe slot

* only take extension screenshots on small screens

* take screenshot at 380

* take large and small screenshot

* update story to use new control flow

apps/browser/src/popup/components/extension-anon-layout-wrapper/extension-anon-layout-wrapper.component.html

@@ -1,31 +1,21 @@
 <popup-page [disablePadding]="true">
-  <popup-header
-    slot="header"
-    [background]="'alt'"
-    [showBackButton]="showBackButton"
-    [pageTitle]="''"
-  >
-    <div class="tw-w-32">
-      <bit-icon *ngIf="showLogo" [icon]="logo" [ariaLabel]="'appLogoLabel' | i18n"></bit-icon>
-    </div>
-
-    <ng-container slot="end">
-      <app-pop-out></app-pop-out>
-      <app-current-account *ngIf="showAcctSwitcher && hasLoggedInAccount"></app-current-account>
-    </ng-container>
-  </popup-header>
-
   <auth-anon-layout
     [title]="pageTitle"
     [subtitle]="pageSubtitle"
     [icon]="pageIcon"
     [showReadonlyHostname]="showReadonlyHostname"
-    [hideLogo]="true"
+    [hideLogo]="!showLogo"
     [maxWidth]="maxWidth"
     [hideFooter]="hideFooter"
     [hideCardWrapper]="hideCardWrapper"
   >
     <router-outlet></router-outlet>
+    <div class="tw-flex tw-gap-2" slot="header-actions">
+      <app-pop-out></app-pop-out>
+      @if (showAcctSwitcher && hasLoggedInAccount) {
+        <app-current-account></app-current-account>
+      }
+    </div>
     <router-outlet slot="secondary" name="secondary"></router-outlet>
     <router-outlet slot="environment-selector" name="environment-selector"></router-outlet>
   </auth-anon-layout>

apps/browser/src/popup/components/extension-anon-layout-wrapper/extension-anon-layout-wrapper.stories.ts

@@ -238,6 +238,11 @@ export const DefaultContentExample: Story = {
       },
     ],
   }),
+  parameters: {
+    chromatic: {
+      viewports: [380, 1280],
+    },
+  },
 };
 
 // Dynamic Content Example