From 24909b425d0d328213011e9acf39f8f239efc05d Mon Sep 17 00:00:00 2001
From: Vahid Menu Nesro <vahid.nesro@virtual-identity.com>
Date: Wed, 24 Jan 2024 05:38:36 +0100
Subject: [PATCH] feat: add add heights to some stories and format

---
 .../components/.storybook/preview-head.html   |  2 +-
 .../src/components/dialog/dialog.stories.ts   | 58 ++++++++++---------
 2 files changed, 33 insertions(+), 27 deletions(-)

diff --git a/packages/components/.storybook/preview-head.html b/packages/components/.storybook/preview-head.html
index 1fecb6119..770be7280 100644
--- a/packages/components/.storybook/preview-head.html
+++ b/packages/components/.storybook/preview-head.html
@@ -128,4 +128,4 @@
     padding-right: unset !important;
     overflow: unset !important;
   }
-</style>
\ No newline at end of file
+</style>
diff --git a/packages/components/src/components/dialog/dialog.stories.ts b/packages/components/src/components/dialog/dialog.stories.ts
index 231b6a7f6..244dd5fa0 100644
--- a/packages/components/src/components/dialog/dialog.stories.ts
+++ b/packages/components/src/components/dialog/dialog.stories.ts
@@ -150,15 +150,17 @@ export const ExtendedFooter = {
   },
   render: () => {
     return html`
-      <sd-dialog open="" id="extended-footer"
-        ><p class="sd-paragraph">
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nibh justo ullamcorper odio tempor molestie phasellus
-          dui vel id. Velit in sed.
-        </p>
-        <h4 slot="headline" class="sd-headline sd-headline--size-3xl">Lorem Ipsum</h4>
-        <sd-button slot="footer" class="w-full">Label</sd-button>
-        <sd-button variant="secondary" slot="footer" class="w-full">Label</sd-button></sd-dialog
-      >
+      <div style="height: 40vh;">
+        <sd-dialog open="" id="extended-footer"
+          ><p class="sd-paragraph">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nibh justo ullamcorper odio tempor molestie
+            phasellus dui vel id. Velit in sed.
+          </p>
+          <h4 slot="headline" class="sd-headline sd-headline--size-3xl">Lorem Ipsum</h4>
+          <sd-button slot="footer" class="w-full">Label</sd-button>
+          <sd-button variant="secondary" slot="footer" class="w-full">Label</sd-button></sd-dialog
+        >
+      </div>
     `;
   }
 };
@@ -176,14 +178,16 @@ export const SmallHeadline = {
   },
   render: () => {
     return html`
-      <sd-dialog open="" id="small-headline"
-        ><p class="sd-paragraph">
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nibh justo ullamcorper odio tempor molestie phasellus
-          dui vel id. Velit in sed.
-        </p>
-        <span slot="headline" class="font-bold">Lorem Ipsum</span>
-        <sd-button slot="footer" class="w-full">Label</sd-button></sd-dialog
-      >
+      <div style="height: 40vh;">
+        <sd-dialog open="" id="small-headline"
+          ><p class="sd-paragraph">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nibh justo ullamcorper odio tempor molestie
+            phasellus dui vel id. Velit in sed.
+          </p>
+          <span slot="headline" class="font-bold">Lorem Ipsum</span>
+          <sd-button slot="footer" class="w-full">Label</sd-button></sd-dialog
+        >
+      </div>
     `;
   }
 };
@@ -204,14 +208,16 @@ export const PreventClosing = {
   },
   render: () => {
     return html`
-      <sd-dialog open="" id="prevent-closing"
-        ><p class="sd-paragraph">
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nibh justo ullamcorper odio tempor molestie phasellus
-          dui vel id. Velit in sed.
-        </p>
-        <h4 slot="headline" class="sd-headline sd-headline--size-3xl">Lorem Ipsum</h4>
-        <sd-button slot="footer" class="w-full" id="close-button">Close</sd-button></sd-dialog
-      >
+      <div style="height: 40vh;">
+        <sd-dialog open="" id="prevent-closing"
+          ><p class="sd-paragraph">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nibh justo ullamcorper odio tempor molestie
+            phasellus dui vel id. Velit in sed.
+          </p>
+          <h4 slot="headline" class="sd-headline sd-headline--size-3xl">Lorem Ipsum</h4>
+          <sd-button slot="footer" class="w-full" id="close-button">Close</sd-button></sd-dialog
+        >
+      </div>
 
       <script>
         const preventClosingDialog = document.querySelector('#prevent-closing');
@@ -236,7 +242,7 @@ export const PreventClosing = {
 
 export const Mouseless = {
   render: (args: any) => {
-    return html`<div class="mouseless">${generateTemplate({ args })}</div>`;
+    return html`<div class="mouseless" style="height: 40vh;">${generateTemplate({ args })}</div>`;
   },
 
   play: async ({ canvasElement }: { canvasElement: HTMLUnknownElement }) => {