fix(Value.SummaryList): spacing of help when wrapped in Form.InfoOverlay (#4667)

Motivation:
https://dnb-it.slack.com/archives/CMXABCHEY/p1741186089782099?thread_ts=1740042283.488439&cid=CMXABCHEY
CSB of the issue:
https://codesandbox.io/p/devbox/value-padding-forked-jsz5nm?workspaceId=ws_LbiDwJdEBdbwxH2AkyAyVE

Issue is happening because the [existing
styling](https://github.com/dnbexperience/eufemia/pull/4667/files#diff-281ca53e6a78ae24056e8fc94bf0274576aef89044ddcc613fb09b0844023e13R50)
does not work when it shows up a `div` like so:
`<div class="dnb-space dnb-height-animation dnb-forms-visibility
dnb-height-animation--is-visible dnb-height-animation--is-in-dom
dnb-height-animation--parallax" aria-hidden="false">VALUE CONTENT
HERE</div>`

Screenshot from
[CSB](https://codesandbox.io/p/devbox/value-padding-forked-jsz5nm?workspaceId=ws_LbiDwJdEBdbwxH2AkyAyVE):
<img width="944" alt="Screenshot 2025-03-05 at 19 04 20"
src="https://github.com/user-attachments/assets/44b6be77-6b70-4f8a-90b8-0fcd05cede79"
/>


I've added a "quickfix" for this now, but doesn't feel 100% correct, as
I'm just adding a specific selector to apply the existing css with
margin when there's a `div` there as well.

I'm not sure why the `div` is present when wrapped in a
`Form.InfoOverlay`, the fix could perhaps be related to not applying
that `div`(if possible).

---------

Co-authored-by: Tobias Høegh <tobias@tujo.no>

Author: langz

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/SummaryList/Examples.tsx

@@ -335,6 +335,36 @@ export const HorizontalLayoutWithoutLabel = () => (
   </ComponentBox>
 )
 
+export const WithHelpInInfoOverlay = () => (
+  <ComponentBox data-visual-test="forms-value-summary-with-help-in-info-overlay">
+    <Form.Handler
+      data={{
+        firstName: 'John',
+        lastName: 'Doe',
+      }}
+    >
+      <Form.InfoOverlay>
+        <Value.SummaryList>
+          <Value.Name.First
+            path="/firstName"
+            help={{
+              title: 'Help title',
+              content: 'Help content.',
+            }}
+          />
+          <Value.Name.Last
+            path="/lastName"
+            help={{
+              title: 'Help title',
+              content: 'Help content.',
+            }}
+          />
+        </Value.SummaryList>
+      </Form.InfoOverlay>
+    </Form.Handler>
+  </ComponentBox>
+)
+
 export function AnimatedVisibility() {
   return (
     <ComponentBox>

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/SummaryList/demos.mdx

@@ -45,4 +45,5 @@ To maintain the semantic structure of the `dl` element, the `Form.Visibility` co
   <Examples.DefaultLayoutWithHelp />
   <Examples.HorizontalLayoutWithHelp />
   <Examples.GridLayoutWithHelp />
+  <Examples.WithHelpInInfoOverlay />
 </VisibleWhenVisualTest>

packages/dnb-eufemia/src/extensions/forms/Value/SummaryList/__tests__/SummaryList.screenshot.test.ts

@@ -44,6 +44,14 @@ describe('Value.SummaryList', () => {
     expect(screenshot).toMatchImageSnapshot()
   })
 
+  it('have to match with help wrapped in info overlay', async () => {
+    const screenshot = await makeScreenshot({
+      selector:
+        '[data-visual-test="forms-value-summary-with-help-in-info-overlay"]',
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
+
   it('have to match default layout with help', async () => {
     const screenshot = await makeScreenshot({
       selector:

packages/dnb-eufemia/src/extensions/forms/Value/SummaryList/__tests__/__image_snapshots__/valuesummarylist-have-to-match-with-help-wrapped-in-info-overlay.snap.png

@@ -45,7 +45,7 @@
     font-weight: var(--font-weight-medium);
   }
   &__label {
-    & > strong:has(+ .dnb-help-button),// To support dt > strong 
+    & strong:has(+ .dnb-help-button),// To support dt > strong or dt > span > strong
     &__content:has(+ .dnb-help-button) {
       margin-right: 0.5rem;
     }