From ed7cff4301a5f18b0f7d9c94ecab772360eb461b Mon Sep 17 00:00:00 2001
From: literat <tomas@litera.me>
Date: Fri, 3 Nov 2023 13:47:04 +0100
Subject: [PATCH] Docs(web-twig): Put pure CSS examples of `Tooltip` in line so
 they are usable in more viewport sizes

---
 .../components/Tooltip/Tooltip.stories.twig   |  2 +-
 .../Tooltip/stories/TooltipOnHover.twig       | 32 +++++--------------
 2 files changed, 9 insertions(+), 25 deletions(-)

diff --git a/packages/web-twig/src/Resources/components/Tooltip/Tooltip.stories.twig b/packages/web-twig/src/Resources/components/Tooltip/Tooltip.stories.twig
index d7d6d1bea7..a7232959d6 100644
--- a/packages/web-twig/src/Resources/components/Tooltip/Tooltip.stories.twig
+++ b/packages/web-twig/src/Resources/components/Tooltip/Tooltip.stories.twig
@@ -10,7 +10,7 @@
         {% include '@components/Tooltip/stories/TooltipStatic.twig' %}
     </DocsSection>
 
-    <DocsSection title="Tooltip on Hover (Pure CSS)">
+    <DocsSection title="Tooltip on Hover (Pure CSS)" stackAlignment="stretch">
         {% include '@components/Tooltip/stories/TooltipOnHover.twig' %}
     </DocsSection>
 
diff --git a/packages/web-twig/src/Resources/components/Tooltip/stories/TooltipOnHover.twig b/packages/web-twig/src/Resources/components/Tooltip/stories/TooltipOnHover.twig
index 15e948d3af..cdc3030cd8 100644
--- a/packages/web-twig/src/Resources/components/Tooltip/stories/TooltipOnHover.twig
+++ b/packages/web-twig/src/Resources/components/Tooltip/stories/TooltipOnHover.twig
@@ -1,9 +1,5 @@
-<TooltipWrapper>
-    <ButtonLink
-        href="#"
-        aria-describedby="my-tooltip-hover-top"
-        UNSAFE_className="TooltipTarget"
-    >
+<TooltipWrapper unsafe_classname="d-inline-block mr-600 mb-600">
+    <ButtonLink href="#" aria-describedby="my-tooltip-hover-top" unsafe_classname="TooltipTarget">
         Tooltip on top
     </ButtonLink>
     <Tooltip id="my-tooltip-hover-top" placement="top">
@@ -11,12 +7,8 @@
     </Tooltip>
 </TooltipWrapper>
 
-<TooltipWrapper>
-    <ButtonLink
-        href="#"
-        aria-describedby="my-tooltip-hover-right"
-        UNSAFE_className="TooltipTarget"
-    >
+<TooltipWrapper unsafe_classname="d-inline-block mr-600 mb-600">
+    <ButtonLink href="#" aria-describedby="my-tooltip-hover-right" unsafe_classname="TooltipTarget">
         Tooltip on right
     </ButtonLink>
     <Tooltip id="my-tooltip-hover-right" placement="right">
@@ -24,12 +16,8 @@
     </Tooltip>
 </TooltipWrapper>
 
-<TooltipWrapper>
-    <ButtonLink
-        href="#"
-        aria-describedby="my-tooltip-hover-bottom"
-        UNSAFE_className="TooltipTarget"
-    >
+<TooltipWrapper unsafe_classname="d-inline-block mr-600 mb-600">
+    <ButtonLink href="#" aria-describedby="my-tooltip-hover-bottom" unsafe_classname="TooltipTarget">
         Tooltip on bottom
     </ButtonLink>
     <Tooltip id="my-tooltip-hover-bottom" placement="bottom">
@@ -37,12 +25,8 @@
     </Tooltip>
 </TooltipWrapper>
 
-<TooltipWrapper>
-    <ButtonLink
-        href="#"
-        aria-describedby="my-tooltip-hover-left"
-        UNSAFE_className="TooltipTarget"
-    >
+<TooltipWrapper unsafe_classname="d-inline-block mr-600 mb-600">
+    <ButtonLink href="#" aria-describedby="my-tooltip-hover-left" unsafe_classname="TooltipTarget">
         Tooltip on left
     </ButtonLink>
     <Tooltip id="my-tooltip-hover-left" placement="left">