UI[Map]: Fix help popover styles in settings; make popover body scrollable

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/custom-action-pretty-editor.component.html

@@ -60,7 +60,8 @@
             [validationArgs]="[]"
             [editorCompleter]="customPrettyActionEditorCompleter"
             functionTitle="{{ 'widget-action.custom-pretty-function' | translate }}"
-            [helpId]="helpId">
+            [helpId]="helpId"
+            [helpPopupStyle]="{width: '900px'}">
           </tb-js-func>
         </div>
       </div>

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/custom-action-pretty-resources-tabs.component.html

@@ -101,7 +101,8 @@
       [validationArgs]="[]"
       [editorCompleter]="customPrettyActionEditorCompleter"
       functionTitle="{{ 'widget-action.custom-pretty-function' | translate }}"
-      [helpId]="helpId">
+      [helpId]="helpId"
+      [helpPopupStyle]="{width: '900px'}">
     </tb-js-func>
   </mat-tab>
 </mat-tab-group>

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/widget-action.component.html

@@ -256,6 +256,7 @@
           [editorCompleter]="customActionEditorCompleter"
           withModules
           helpId="widget/action/custom_action_fn"
+          [helpPopupStyle]="{width: '900px'}"
       ></tb-js-func>
     </ng-template>
     <ng-template [ngSwitchCase]="widgetActionType.placeMapItem">

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/data-layer-color-settings-panel.component.html

@@ -95,7 +95,8 @@
                 [functionArgs]="['data', 'dsData']"
                 [globalVariables]="functionScopeVariables"
                 functionTitle="{{ 'widgets.maps.data-layer.color-function' | translate }}"
-                [helpId]="helpId">
+                [helpId]="helpId"
+                [helpPopupStyle]="{width: '900px'}">
     </tb-js-func>
   </div>
 </ng-template>

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/data-layer-color-settings-panel.component.scss

@@ -43,6 +43,7 @@
     display: flex;
     flex-direction: column;
     min-height: 0;
+    overflow: auto;
   }
   .tb-data-layer-color-settings-panel-buttons {
     height: 40px;

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/data-layer-pattern-settings.component.html

@@ -46,7 +46,8 @@
                     [globalVariables]="functionScopeVariables"
                     [functionArgs]="['data', 'dsData']"
                     functionTitle="{{ (patternType === 'label' ? 'widgets.maps.data-layer.label-function' : 'widgets.maps.data-layer.tooltip-function') | translate }}"
-                    [helpId]="helpId">
+                    [helpId]="helpId"
+                    [helpPopupStyle]="{width: '900px'}">
         </tb-js-func>
         <ng-container *ngIf="patternType === 'tooltip'">
           <div class="tb-form-row space-between column-xs">

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/marker-clustering-settings.component.html

@@ -88,7 +88,8 @@
                         [globalVariables]="functionScopeVariables"
                         [functionArgs]="['data', 'childCount']"
                         functionTitle="{{ 'widgets.maps.data-layer.marker.clustering.marker-color-function' | translate }}"
-                        helpId="widget/lib/map/clustering_color_fn">
+                        helpId="widget/lib/map/clustering_color_fn"
+                        [helpPopupStyle]="{width: '900px'}">
             </tb-js-func>
           </ng-template>
         </mat-expansion-panel>

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/marker-image-settings-panel.component.scss

@@ -41,6 +41,7 @@
     display: flex;
     flex-direction: column;
     min-height: 0;
+    overflow: auto;
   }
   .tb-marker-image-settings-panel-buttons {
     height: 40px;

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/trip-timeline-settings.component.html

@@ -70,7 +70,8 @@
                           [globalVariables]="functionScopeVariables"
                           [functionArgs]="['data', 'dsData']"
                           functionTitle="{{ 'widgets.maps.timeline.location-snap-filter-function' | translate }}"
-                          helpId="widget/lib/map/trip_point_as_anchor_fn">
+                          helpId="widget/lib/map/trip_point_as_anchor_fn"
+                          [helpPopupStyle]="{width: '900px'}">
               </tb-js-func>
             </ng-template>
           </mat-expansion-panel>

ui-ngx/src/assets/locale/locale.constant-en_US.json

@@ -8013,7 +8013,7 @@
                 "pattern-type-function": "Function",
                 "label-pattern": "Label (pattern examples: '${entityName}', '${entityName}: (Text ${keyName} units.)' )",
                 "label-function": "Label function",
-                "tooltip-pattern": "Tooltip (for ex. 'Text ${keyName} units.' or <link-act name='my-action'>Link text</link-act>')",
+                "tooltip-pattern": "Tooltip (for ex. 'Text ${keyName} units.' or <link-act name='my-action'>Link text</link-act>)",
                 "tooltip-function": "Tooltip function",
                 "tooltip-trigger": "Tooltip trigger",
                 "tooltip-trigger-click": "Show tooltip on click",