97732 Fixed some display issues

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/>

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>

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);
 }

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;
 }