From 0527cdbaca6b0a254eb6bac2e052643b45612837 Mon Sep 17 00:00:00 2001
From: IB002 <132930816+IB002@users.noreply.github.com>
Date: Wed, 12 Jul 2023 13:15:23 -0400
Subject: [PATCH 1/2] fix(styles): added margin bot to improve clarity

---
 .../styles/stories/Components/quick-view/no-header.example.html | 2 +-
 .../styles/stories/Components/quick-view/popover.example.html   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/styles/stories/Components/quick-view/no-header.example.html b/packages/styles/stories/Components/quick-view/no-header.example.html
index 4f96281bab..9bc5f3dae4 100644
--- a/packages/styles/stories/Components/quick-view/no-header.example.html
+++ b/packages/styles/stories/Components/quick-view/no-header.example.html
@@ -1,4 +1,4 @@
-<div class="fd-popover">
+<div class="fd-popover" style="margin-bottom: 300px;">
     <div class="fd-popover__body" aria-hidden="false" id="popoverA1">
         <div class="fd-quick-view">
             <div class="fd-quick-view__content">
diff --git a/packages/styles/stories/Components/quick-view/popover.example.html b/packages/styles/stories/Components/quick-view/popover.example.html
index e22adcdd2a..56dc80dff3 100644
--- a/packages/styles/stories/Components/quick-view/popover.example.html
+++ b/packages/styles/stories/Components/quick-view/popover.example.html
@@ -1,4 +1,4 @@
-<div class="fd-popover">
+<div class="fd-popover" style="margin-bottom: 500px;">
     <div class="fd-popover__body" aria-hidden="false" id="popoverA1">
         <div class="fd-quick-view">
             <div class="fd-bar fd-bar--header">

From 299d84772b636bdb8a7533b6216970018db46bd7 Mon Sep 17 00:00:00 2001
From: IB002 <132930816+IB002@users.noreply.github.com>
Date: Wed, 12 Jul 2023 14:05:55 -0400
Subject: [PATCH 2/2] chore: moved margin to separate div element [ci visual]

---
 .../quick-view/no-header.example.html         |  61 +++++-----
 .../quick-view/popover.example.html           | 111 +++++++++---------
 2 files changed, 89 insertions(+), 83 deletions(-)

diff --git a/packages/styles/stories/Components/quick-view/no-header.example.html b/packages/styles/stories/Components/quick-view/no-header.example.html
index 9bc5f3dae4..73bff4633e 100644
--- a/packages/styles/stories/Components/quick-view/no-header.example.html
+++ b/packages/styles/stories/Components/quick-view/no-header.example.html
@@ -1,38 +1,41 @@
-<div class="fd-popover" style="margin-bottom: 300px;">
-    <div class="fd-popover__body" aria-hidden="false" id="popoverA1">
-        <div class="fd-quick-view">
-            <div class="fd-quick-view__content">
-                <div class="fd-bar fd-bar--header-with-subheader">
-                    <div class="fd-bar__left">
-                        <span class="fd-avatar fd-avatar--s" role="presentation">
-                            <i role="presentation" class="fd-avatar__icon sap-icon--camera"></i>
-                        </span>
 
-                        <div class="fd-quick-view__subheader-text">
-                            <h5 class="fd-title fd-title--h5">Company B</h5>
-
-                            <div class="fd-quick-view__subtitle">
-                                Michael Adams
+<div style="margin-bottom: 300px;">
+    <div class="fd-popover" >
+        <div class="fd-popover__body" aria-hidden="false" id="popoverA1">
+            <div class="fd-quick-view">
+                <div class="fd-quick-view__content">
+                    <div class="fd-bar fd-bar--header-with-subheader">
+                        <div class="fd-bar__left">
+                            <span class="fd-avatar fd-avatar--s" role="presentation">
+                                <i role="presentation" class="fd-avatar__icon sap-icon--camera"></i>
+                            </span>
+    
+                            <div class="fd-quick-view__subheader-text">
+                                <h5 class="fd-title fd-title--h5">Company B</h5>
+    
+                                <div class="fd-quick-view__subtitle">
+                                    Michael Adams
+                                </div>
                             </div>
                         </div>
                     </div>
-                </div>
-
-                <div class="fd-form-group" role="group">
-                    <div class="fd-form-item">
-                        <label class="fd-form-label">Start Date:</label>
-                        <span class="fd-text">01/01/2015</span>
-                    </div>
-                    <div class="fd-form-item">
-                        <label class="fd-form-label">End Date:</label>
-                        <span class="fd-text">31/12/2015</span>
-                    </div>
-                    <div class="fd-form-item">
-                        <label class="fd-form-label">Occurrence:</label>
-                        <span class="fd-text">Weekly</span>
+    
+                    <div class="fd-form-group" role="group">
+                        <div class="fd-form-item">
+                            <label class="fd-form-label">Start Date:</label>
+                            <span class="fd-text">01/01/2015</span>
+                        </div>
+                        <div class="fd-form-item">
+                            <label class="fd-form-label">End Date:</label>
+                            <span class="fd-text">31/12/2015</span>
+                        </div>
+                        <div class="fd-form-item">
+                            <label class="fd-form-label">Occurrence:</label>
+                            <span class="fd-text">Weekly</span>
+                        </div>
                     </div>
                 </div>
             </div>
         </div>
-    </div>
+    </div>    
 </div>
diff --git a/packages/styles/stories/Components/quick-view/popover.example.html b/packages/styles/stories/Components/quick-view/popover.example.html
index 56dc80dff3..7fc1a3f551 100644
--- a/packages/styles/stories/Components/quick-view/popover.example.html
+++ b/packages/styles/stories/Components/quick-view/popover.example.html
@@ -1,65 +1,68 @@
-<div class="fd-popover" style="margin-bottom: 500px;">
-    <div class="fd-popover__body" aria-hidden="false" id="popoverA1">
-        <div class="fd-quick-view">
-            <div class="fd-bar fd-bar--header">
-                <div class="fd-bar__middle">
-                    <div class="fd-bar__element">Company</div>
+<div style="margin-bottom: 500px;">
+    <div class="fd-popover" >
+        <div class="fd-popover__body" aria-hidden="false" id="popoverA1">
+            <div class="fd-quick-view">
+                <div class="fd-bar fd-bar--header">
+                    <div class="fd-bar__middle">
+                        <div class="fd-bar__element">Company</div>
+                    </div>
                 </div>
-            </div>
-
-            <div class="fd-quick-view__content">
-                <div class="fd-bar fd-bar--header-with-subheader">
-                    <div class="fd-bar__left">
-                        <span class="fd-avatar fd-avatar--s" role="presentation">
-                            <i role="presentation" class="fd-avatar__icon sap-icon--building"></i>
-                        </span>
-
-                        <div class="fd-quick-view__subheader-text">
-                            <h5 class="fd-title fd-title--h5">Company B</h5>
-
-                            <div class="fd-quick-view__subtitle">
-                                Michael Adams
+    
+                <div class="fd-quick-view__content">
+                    <div class="fd-bar fd-bar--header-with-subheader">
+                        <div class="fd-bar__left">
+                            <span class="fd-avatar fd-avatar--s" role="presentation">
+                                <i role="presentation" class="fd-avatar__icon sap-icon--building"></i>
+                            </span>
+    
+                            <div class="fd-quick-view__subheader-text">
+                                <h5 class="fd-title fd-title--h5">Company B</h5>
+    
+                                <div class="fd-quick-view__subtitle">
+                                    Michael Adams
+                                </div>
                             </div>
                         </div>
                     </div>
-                </div>
-
-
-                <div class="fd-form-group" role="group">
-                    <div class="fd-form-group__header" aria-labelledby="contactDetails">
-                        <h1 class="fd-form-group__header-text" id="contactDetails">Contact Details</h1>
-                    </div>
-                    <div class="fd-form-item">
-                        <label class="fd-form-label">Phone</label>
-                        <a class="fd-link" href="tel:+1 605 555 5555"><span class="fd-link__content">+1 605 555 5555</span></a>
-                    </div>
-                    <div class="fd-form-item">
-                        <label class="fd-form-label">Address</label>
-                        <span class="fd-text">
-                            781 Main Street <br>
-                            Anytown, SD 57401, USA
-                        </span>
-                    </div>
-                </div>
-
-                <div class="fd-form-group" role="group">
-                    <div class="fd-form-group__header" aria-labelledby="mainContact">
-                        <h1 class="fd-form-group__header-text" id="mainContact">Main Contact</h1>
-                    </div>
-                    <div class="fd-form-item">
-                        <label class="fd-form-label">Name</label>
-                        <span class="fd-text">Michael Adams</span>
-                    </div>
-                    <div class="fd-form-item">
-                        <label class="fd-form-label">Mobile</label>
-                        <a class="fd-link" href="tel:+1 605 555 5555"><span class="fd-link__content">+1 605 555 5555</span></a>
+    
+    
+                    <div class="fd-form-group" role="group">
+                        <div class="fd-form-group__header" aria-labelledby="contactDetails">
+                            <h1 class="fd-form-group__header-text" id="contactDetails">Contact Details</h1>
+                        </div>
+                        <div class="fd-form-item">
+                            <label class="fd-form-label">Phone</label>
+                            <a class="fd-link" href="tel:+1 605 555 5555"><span class="fd-link__content">+1 605 555 5555</span></a>
+                        </div>
+                        <div class="fd-form-item">
+                            <label class="fd-form-label">Address</label>
+                            <span class="fd-text">
+                                781 Main Street <br>
+                                Anytown, SD 57401, USA
+                            </span>
+                        </div>
                     </div>
-                    <div class="fd-form-item">
-                        <label class="fd-form-label">Mobile</label>
-                        <a class="fd-link" href="tel:+1 605 555 5555"><span class="fd-link__content">+1 605 555 5555</span></a>
+    
+                    <div class="fd-form-group" role="group">
+                        <div class="fd-form-group__header" aria-labelledby="mainContact">
+                            <h1 class="fd-form-group__header-text" id="mainContact">Main Contact</h1>
+                        </div>
+                        <div class="fd-form-item">
+                            <label class="fd-form-label">Name</label>
+                            <span class="fd-text">Michael Adams</span>
+                        </div>
+                        <div class="fd-form-item">
+                            <label class="fd-form-label">Mobile</label>
+                            <a class="fd-link" href="tel:+1 605 555 5555"><span class="fd-link__content">+1 605 555 5555</span></a>
+                        </div>
+                        <div class="fd-form-item">
+                            <label class="fd-form-label">Mobile</label>
+                            <a class="fd-link" href="tel:+1 605 555 5555"><span class="fd-link__content">+1 605 555 5555</span></a>
+                        </div>
                     </div>
                 </div>
             </div>
         </div>
     </div>
+    
 </div>