From 5a1e57408fd546df71d500981c3fb2bd3274be22 Mon Sep 17 00:00:00 2001
From: Koen Pauwels <koen.pauwels@atmire.com>
Date: Thu, 5 Jan 2023 13:21:50 +0100
Subject: [PATCH] 97732 Fixed some display issues

---
 .../page-internal-server-error.component.html |  7 ++++++-
 .../context-help-wrapper.component.html       |  2 +-
 .../context-help-wrapper.component.scss       | 19 ++++++++++---------
 src/styles/_custom_variables.scss             |  1 +
 4 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/src/app/page-internal-server-error/page-internal-server-error.component.html b/src/app/page-internal-server-error/page-internal-server-error.component.html
index bb43cdc678..a60624dbd5 100644
--- a/src/app/page-internal-server-error/page-internal-server-error.component.html
+++ b/src/app/page-internal-server-error/page-internal-server-error.component.html
@@ -1,6 +1,11 @@
 <div class="page-internal-server-error container">
   <h1>500</h1>
-  <h2><small *dsContextHelp="{content: 'context-help.multi-para.test', id: 'server-error'}">{{"500.page-internal-server-error" | translate}}</small></h2>
+  <h2><small *dsContextHelp="{content: 'context-help.multi-para.test',
+    id: 'server-error',
+    tooltipPlacement: 'bottom'}"
+  >
+    {{"500.page-internal-server-error" | translate}}
+  </small></h2>
   <br/>
   <p>{{"500.help" | translate}}</p>
   <br/>
diff --git a/src/app/shared/context-help-wrapper/context-help-wrapper.component.html b/src/app/shared/context-help-wrapper/context-help-wrapper.component.html
index 03fc46c172..b031d0f42d 100644
--- a/src/app/shared/context-help-wrapper/context-help-wrapper.component.html
+++ b/src/app/shared/context-help-wrapper/context-help-wrapper.component.html
@@ -18,7 +18,7 @@
    [placement]="tooltipPlacement"
    autoClose="outside"
    triggers="manual"
-   container="'body'"
+   container="body"
    #tooltip="ngbTooltip"
    (click)="onClick()">
 </i>
diff --git a/src/app/shared/context-help-wrapper/context-help-wrapper.component.scss b/src/app/shared/context-help-wrapper/context-help-wrapper.component.scss
index 3bf9c7bba8..d28883cae3 100644
--- a/src/app/shared/context-help-wrapper/context-help-wrapper.component.scss
+++ b/src/app/shared/context-help-wrapper/context-help-wrapper.component.scss
@@ -3,14 +3,14 @@
 }
 
 .ds-context-help-icon {
-  position: absolute;
-  top: 0;
-  cursor: pointer;
-  color: var(--bs-info);
-  background-color: var(--bs-white);
-  font-size: 16px; // not relative, because we don't want the icon to resize based on the container
-  line-height: 1;
-  border-radius: 50%;
+    position: absolute;
+    top: 0;
+    cursor: pointer;
+    color: var(--bs-info);
+    background-color: var(--bs-white);
+    font-size: 16px; // not relative, because we don't want the icon to resize based on the container
+    line-height: 1;
+    border-radius: 50%;
 }
 
 .ds-context-help-icon-left {
@@ -22,5 +22,6 @@
 }
 
 ::ng-deep .tooltip-inner {
-    width: 300px;
+    width: var(--ds-context-help-tooltip-width);
+    max-width: var(--ds-context-help-tooltip-width);
 }
diff --git a/src/styles/_custom_variables.scss b/src/styles/_custom_variables.scss
index 2013562dec..4098bb6417 100644
--- a/src/styles/_custom_variables.scss
+++ b/src/styles/_custom_variables.scss
@@ -88,4 +88,5 @@
 
   --ds-context-x-offset: -16px;
   --ds-context-help-icon-size: 16px;
+  --ds-context-help-tooltip-width: 300px;
 }