From 8aa6c675c42fcfb5d249d75b16bc388239939581 Mon Sep 17 00:00:00 2001
From: Marco 'Lubber' Wienkoop <c64@lubber.de>
Date: Fri, 13 Jan 2023 08:33:31 +0100
Subject: [PATCH] fix(flyout): content height wrong without header

Whenever a flyout contains actions but no header, the content height is miscalculated and the action container is misaligned.
The resize calculation is also fixed now, as it was always expecting all 3 nodes (header,content,actions).
Now it also works, if some or even none of them is available inside the flyout
---
 src/definitions/modules/flyout.js           | 7 +++++--
 src/definitions/modules/flyout.less         | 8 ++++++++
 src/themes/default/modules/flyout.variables | 2 ++
 3 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/definitions/modules/flyout.js b/src/definitions/modules/flyout.js
index 35680bda25..fec87d6113 100644
--- a/src/definitions/modules/flyout.js
+++ b/src/definitions/modules/flyout.js
@@ -557,9 +557,12 @@
                         var
                             $header = $module.children(selector.header),
                             $content = $module.children(selector.content),
-                            $actions = $module.children(selector.actions)
+                            $actions = $module.children(selector.actions),
+                            newContentHeight = ($context.height() || 0) - ($header.outerHeight() || 0) - ($actions.outerHeight() || 0)
                         ;
-                        $content.css('min-height', ($context.height() - $header.outerHeight() - $actions.outerHeight()) + 'px');
+                        if (newContentHeight > 0) {
+                            $content.css('min-height', String(newContentHeight) + 'px');
+                        }
                     },
                 },
 
diff --git a/src/definitions/modules/flyout.less b/src/definitions/modules/flyout.less
index c021bfe3bb..328f0e22cd 100644
--- a/src/definitions/modules/flyout.less
+++ b/src/definitions/modules/flyout.less
@@ -101,11 +101,19 @@
 }
 .ui.flyout.left > .content,
 .ui.flyout.right > .content {
+    min-height: @contentMinHeightWithoutHeader;
+}
+.ui.flyout.left > .header + .content,
+.ui.flyout.right > .header + .content {
     min-height: @contentMinHeight;
 }
 & when(@variationFlyoutScrolling) {
     .ui.flyout.left > .scrolling.content,
     .ui.flyout.right > .scrolling.content {
+        max-height: @scrollingContentMaxHeightWithoutHeader;
+    }
+    .ui.flyout.left > .header + .scrolling.content,
+    .ui.flyout.right > .header + .scrolling.content {
         max-height: @scrollingContentMaxHeight;
     }
 
diff --git a/src/themes/default/modules/flyout.variables b/src/themes/default/modules/flyout.variables
index 9728ecce63..dd1c3e0779 100644
--- a/src/themes/default/modules/flyout.variables
+++ b/src/themes/default/modules/flyout.variables
@@ -45,7 +45,9 @@
 
 /* Scrolling Content */
 @contentMinHeight: calc(100vh - 9.1rem);
+@contentMinHeightWithoutHeader: calc(100vh - 4.7rem);
 @scrollingContentMaxHeight: @contentMinHeight;
+@scrollingContentMaxHeightWithoutHeader: @contentMinHeightWithoutHeader;
 @scrollingContentMaxHeightTopBottom: calc(80vh - 9.1rem);
 
 /* Close Icon */