Larger min-w to anonlayout content container (#9502)

* add larger min-w to content container

* increase min-w

libs/auth/src/angular/anon-layout/anon-layout.component.html

@@ -13,9 +13,11 @@
     </h1>
     <p *ngIf="subtitle" bitTypography="body1">{{ subtitle }}</p>
   </div>
-  <div class="tw-mb-auto tw-max-w-md tw-mx-auto tw-flex tw-flex-col tw-items-center">
+  <div
+    class="tw-mb-auto tw-min-w-full tw-max-w-md tw-mx-auto tw-flex tw-flex-col tw-items-center sm:tw-min-w-[28rem]"
+  >
     <div
-      class="tw-rounded-xl tw-mb-9 tw-mx-auto tw-min-w-64 sm:tw-bg-background sm:tw-border sm:tw-border-solid sm:tw-border-secondary-300 sm:tw-p-8"
+      class="tw-rounded-xl tw-mb-9 tw-mx-auto tw-min-w-full sm:tw-bg-background sm:tw-border sm:tw-border-solid sm:tw-border-secondary-300 sm:tw-p-8"
     >
       <ng-content></ng-content>
     </div>

libs/auth/src/angular/anon-layout/anon-layout.stories.ts

@@ -119,6 +119,24 @@ export const WithLongContent: Story = {
   }),
 };
 
+export const WithThinPrimaryContent: Story = {
+  render: (args) => ({
+    props: args,
+    template:
+      // Projected content (the <div>'s) and styling is just a sample and can be replaced with any content/styling.
+      `
+      <auth-anon-layout [title]="title" [subtitle]="subtitle" [showReadonlyHostname]="showReadonlyHostname">
+        <div class="text-center">Lorem ipsum</div>
+
+        <div slot="secondary" class="text-center">
+          <div class="tw-font-bold tw-mb-2">Secondary Projected Content (optional)</div>
+          <button bitButton>Perform Action</button>
+        </div>
+      </auth-anon-layout>
+    `,
+  }),
+};
+
 export const WithIcon: Story = {
   render: (args) => ({
     props: args,