update story

umbraco · Jan 19, 2024 · 69072c5 · 69072c5
1 parent a46b75e
commit 69072c5
Showing 1 changed file with 26 additions and 28 deletions.
diff --git a/packages/uui-popover-container/lib/uui-popover-container.story.ts b/packages/uui-popover-container/lib/uui-popover-container.story.ts
@@ -187,34 +187,32 @@ export const InsideScrollContainer: Story = {
     },
   },
   render: args => html`
-    <div
-      style="width: 300px; height: 300px; outline: 1px solid black; overflow: auto;">
-      <div style="height: 150px"></div>
-      <uui-button
-        id="popover-button"
-        popovertarget="popover-container"
-        look="primary"
-        label="Open popover">
-        Open popover
-      </uui-button>
-      <uui-popover-container
-        id="popover-container"
-        popover
-        placement=${args.placement}
-        margin=${args.margin}>
-        <div
-          style="background-color: var(--uui-color-surface); max-width: 150px; box-shadow: var(--uui-shadow-depth-4); padding: var(--uui-size-space-4); border-radius: var(--uui-border-radius); font-size: 0.9rem;">
-          <h2>Scrolling should trigger an update</h2>
-          <p>
-            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis ex
-            fuga pariatur dolorum, in natus. Ipsa, veritatis minus. Dolore saepe
-            modi libero voluptates provident consequatur ex illo a, eligendi
-            enim?
-          </p>
-        </div>
-      </uui-popover-container>
-      <div style="height: 150px"></div>
-      <div style="height: 150px"></div>
+    <div style="height: 500px; overflow: auto; outline: 1px solid black">
+      <div
+        style="width: 300px; height: 300px; outline: 1px solid black; overflow: auto;">
+        <div style="height: 150px"></div>
+        <uui-button
+          id="popover-button"
+          popovertarget="popover-container"
+          look="primary"
+          label="Open popover">
+          Open popover
+        </uui-button>
+        <div style="height: 150px"></div>
+        <div style="height: 150px"></div>
+      </div>
+      <div style="height: 400px"></div>
     </div>
+    <uui-popover-container
+      id="popover-container"
+      popover
+      placement=${args.placement}
+      margin=${args.margin}>
+      <div
+        style="width: 100%; background-color: var(--uui-color-surface); max-width: 200px; box-shadow: var(--uui-shadow-depth-4); padding: var(--uui-size-space-4); border-radius: var(--uui-border-radius); font-size: 0.9rem;">
+        <h3>Scroll!</h3>
+        Scrolling in any of the 2 boxes should trigger an update
+      </div>
+    </uui-popover-container>
   `,
 };