[CL-801] Move popover in kitchen sink story to avoid scrolling (#15767)

libs/components/src/stories/kitchen-sink/components/kitchen-sink-main.component.ts

@@ -105,7 +105,21 @@ class KitchenSinkDialog {
 
     <div class="tw-my-6">
       <h1 bitTypography="h1">Bitwarden Kitchen Sink<bit-avatar text="Bit Warden"></bit-avatar></h1>
-      <a bitLink linkType="primary" href="#">Learn more</a>
+      <a bitLink linkType="primary" href="#">This is a link</a>
+      <p bitTypography="body1" class="tw-inline">
+        &nbsp;and this is a link button popover trigger:&nbsp;
+      </p>
+      <button
+        bitLink
+        linkType="primary"
+        [bitPopoverTriggerFor]="myPopover"
+        #triggerRef="popoverTrigger"
+        type="button"
+        slot="end"
+        aria-label="Popover trigger link"
+      >
+        <i class="bwi bwi-question-circle"></i>
+      </button>
     </div>
 
     <bit-callout type="info" title="About the Kitchen Sink">
@@ -149,6 +163,14 @@ class KitchenSinkDialog {
         </bit-section>
       </bit-tab>
     </bit-tab-group>
+
+    <bit-popover [title]="'Educational Popover'" #myPopover>
+      <div>You can learn more things at:</div>
+      <ul class="tw-mt-2 tw-mb-0 tw-ps-4">
+        <li>Help center</li>
+        <li>Support</li>
+      </ul>
+    </bit-popover>
   `,
 })
 export class KitchenSinkMainComponent {

libs/components/src/stories/kitchen-sink/kitchen-sink.stories.ts

@@ -6,7 +6,6 @@ import {
   userEvent,
   getAllByRole,
   getByRole,
-  getByLabelText,
   fireEvent,
   getByText,
   getAllByLabelText,
@@ -155,16 +154,11 @@ export const PopoverOpen: Story = {
   render: Default.render,
   play: async (context) => {
     const canvas = context.canvasElement;
-    const passwordLabelIcon = getByLabelText(canvas, "A random password (required)", {
+    const popoverLink = getByRole(canvas, "button", {
-      selector: "button",
+      name: "Popover trigger link",
     });
 
-    await userEvent.click(passwordLabelIcon);
+    await userEvent.click(popoverLink);
-  },
-  parameters: {
-    chromatic: {
-      disableSnapshot: true,
-    },
   },
 };