From 56a0a8b80c0a879e68b19aedbff8d1b876a1cca5 Mon Sep 17 00:00:00 2001
From: tischsoic <symfiz@gmail.com>
Date: Tue, 21 Feb 2023 11:09:41 +0100
Subject: [PATCH] IBX-5140: Add new-line break option to details component

---
 src/bundle/Resources/public/scss/_details.scss     |  5 +++++
 .../admin/ui/component/details/details.html.twig   | 14 +++++++++-----
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/bundle/Resources/public/scss/_details.scss b/src/bundle/Resources/public/scss/_details.scss
index 906943a0c9..6f63eeef04 100644
--- a/src/bundle/Resources/public/scss/_details.scss
+++ b/src/bundle/Resources/public/scss/_details.scss
@@ -20,6 +20,11 @@
             margin-top: calculateRem(8px);
             margin-bottom: 0;
         }
+
+        &--break {
+            flex-basis: 100%;
+            height: 0;
+        }
     }
 
     &__item-content {
diff --git a/src/bundle/Resources/views/themes/admin/ui/component/details/details.html.twig b/src/bundle/Resources/views/themes/admin/ui/component/details/details.html.twig
index 931f9584d7..17b4a73eeb 100644
--- a/src/bundle/Resources/views/themes/admin/ui/component/details/details.html.twig
+++ b/src/bundle/Resources/views/themes/admin/ui/component/details/details.html.twig
@@ -12,12 +12,16 @@
     {% block details_items %}
         <div class="ibexa-details__items {{ view_mode|default('') == 'vertical' ? 'ibexa-details__items--vertical' }}">
             {% for item in items %}
-                <div class="ibexa-details__item">
-                    <div class="ibexa-details__item-label ibexa-label">{{ item.label }}</div>
-                    <div class="ibexa-details__item-content">
-                        {{ item.content_raw is defined ? item.content_raw|raw : item.content }}
+                {% if item.is_break|default(false) %}
+                    <div class="ibexa-details__item ibexa-details__item--break"></div>
+                {% else %}
+                    <div class="ibexa-details__item">
+                        <div class="ibexa-details__item-label ibexa-label">{{ item.label }}</div>
+                        <div class="ibexa-details__item-content">
+                            {{ item.content_raw is defined ? item.content_raw|raw : item.content }}
+                        </div>
                     </div>
-                </div>
+                {% endif %}
             {% endfor %}
         </div>
     {% endblock %}