fix: adjust styles for all modal window

Introduce option `scroll` to `ControllerModal` to set modal window scroll or table body scroll.
Modify templates to fix the style in table headers.
Adjust layout for all modal window.

Refs: #1156

rodan-client/code/src/js/Controllers/ControllerModal.js

@@ -72,8 +72,7 @@ export default class ControllerModal extends BaseController
             $modalEl.html(this._layoutViewModal.el);
             $('.modal-title').text(options.title);
             $('.modal-body').append(options.content);
-            $('#modal-close').on('click', () => Radio.channel('rodan').request(RODAN_EVENTS.REQUEST__MODAL_HIDE));
-            $modalEl.show();            
+            $('#modal-close').on('click', () => Radio.channel('rodan').request(RODAN_EVENTS.REQUEST__MODAL_HIDE));      
         }
         else
         {
@@ -85,9 +84,21 @@ export default class ControllerModal extends BaseController
 
             $modalEl.html(this._layoutViewModal.el);
             $('.modal-title').text(options.title);
-            $('#modal-close').on('click', () => Radio.channel('rodan').request(RODAN_EVENTS.REQUEST__MODAL_HIDE));
-            $modalEl.show();            
+            $('#modal-close').on('click', () => Radio.channel('rodan').request(RODAN_EVENTS.REQUEST__MODAL_HIDE));         
         }
+
+        switch (options.scroll) {
+            case 'modal':
+                $('.modal-body').addClass('modal-scroll');
+                break;
+
+            case 'table':
+                $('.modal .table-responsive').css('height', '50vh');
+                $('.modal .table-responsive>.table>tbody').addClass('tbody-scroll');
+                break;
+        }
+
+        $modalEl.show();      
     }
 
     /**

rodan-client/code/src/js/Controllers/ControllerWorkflowBuilder.js

@@ -498,7 +498,7 @@ export default class ControllerWorkflowBuilder extends BaseController
         var collection = new JobCollection();
         collection.fetch();
         var view = new ViewJobCollection({collection: collection, childViewOptions: {workflow: options.workflow}});
-        Radio.channel('rodan').request(RODAN_EVENTS.REQUEST__MODAL_SHOW, {content: view, title: 'Jobs'});
+        Radio.channel('rodan').request(RODAN_EVENTS.REQUEST__MODAL_SHOW, {content: view, title: 'Jobs', scroll: 'table'});
     }
 
     /**
@@ -531,7 +531,7 @@ export default class ControllerWorkflowBuilder extends BaseController
     _handleRequestShowWorkflowJobPortsView(options)
     {
         var view = new LayoutViewControlPorts(options);
-        Radio.channel('rodan').request(RODAN_EVENTS.REQUEST__MODAL_SHOW, {content: view, title: 'WorkflowJob Ports'});
+        Radio.channel('rodan').request(RODAN_EVENTS.REQUEST__MODAL_SHOW, {content: view, title: 'WorkflowJob Ports', scroll: 'modal'});
     }
 
     /**

rodan-client/code/src/js/Views/Master/Navigation/LayoutViewNavigation.js

@@ -128,7 +128,7 @@ export default class LayoutViewNavigation extends Marionette.View
                                                                  serverConfiguration: serverConfig,
                                                                  date: serverDate,
                                                                  client: Configuration.CLIENT});
-        Radio.channel('rodan').request(RODAN_EVENTS.REQUEST__MODAL_SHOW, {title: 'About', content: html});
+        Radio.channel('rodan').request(RODAN_EVENTS.REQUEST__MODAL_SHOW, {title: 'About', content: html, scroll: 'modal'});
     }
 
     /**
@@ -149,7 +149,7 @@ export default class LayoutViewNavigation extends Marionette.View
         var view = new BaseViewCollection({collection: collection,
                                            template: _.template($('#template-resourcetype_collection').text()),
                                            childView: ViewResourceTypeDetailCollectionItem});
-        Radio.channel('rodan').request(RODAN_EVENTS.REQUEST__MODAL_SHOW, {title: 'Development', content: view});
+        Radio.channel('rodan').request(RODAN_EVENTS.REQUEST__MODAL_SHOW, {title: 'Development', content: view, scroll: 'table'});
     }
 
 

rodan-client/code/styles/default.css

@@ -706,6 +706,7 @@ tbody > tr:hover {
 }
 .single-project-view-collection-wrapper {
     gap: 10px;
+    overflow: hidden;
 }
 .resource-upload-container {
     height: fit-content;
@@ -992,6 +993,9 @@ div#main_workflowbuilder
     width: fit-content;
     height: fit-content;
 }
+.modal-scroll {
+    overflow: scroll;
+}
 /* project-users modal styles */
 #admins-and-workers-tables {
     align-items: flex-start;
@@ -1048,7 +1052,9 @@ div#main_workflowbuilder
 .table-modal>tbody>tr>td:first-child {
     max-width: 180px;
 }
-
+.tbody-scroll {
+    overflow: scroll;
+}
 /* job settings modal */
 #workflowjob-settings:first-child {
     display: flex;

rodan-client/code/templates/Views/Master/Main/InputPort/Collection/template-main_inputport_collection.html

@@ -4,6 +4,7 @@ <h3>Input Ports</h3>
         <thead>
             <tr>
                 <th>Label</th>
+                <th></th>
             </tr>
         </thead>
         <tbody>

rodan-client/code/templates/Views/Master/Main/InputPortType/Collection/template-main_inputporttype_collection.html

@@ -7,6 +7,7 @@ <h3>Input Port Types</h3>
                 <th>Current</th>
                 <th>Min</th>
                 <th>Max</th>
+                <th></th>
             </tr>
         </thead>
         <tbody>

rodan-client/code/templates/Views/Master/Main/Job/Collection/template-main_job_collection.html

@@ -5,6 +5,7 @@
                 <th data-name="category">Category</th>
                 <th data-name="name">Name</th>
                 <th data-name="interactive">Interactive</th>
+                <th></th>
             </tr>
         </thead>
         <tbody>

rodan-client/code/templates/Views/Master/Main/OutputPort/Collection/template-main_outputport_collection.html

@@ -4,6 +4,7 @@ <h3>Output Ports</h3>
         <thead>
             <tr>
                 <th>Label</th>
+                <th></th>
             </tr>
         </thead>
         <tbody>

rodan-client/code/templates/Views/Master/Main/OutputPortType/Collection/template-main_outputporttype_collection.html

@@ -7,6 +7,7 @@ <h3>Output Port Types</h3>
                 <th>Current</th>
                 <th>Min</th>
                 <th>Max</th>
+                <th></th>
             </tr>
         </thead>
         <tbody>

rodan-client/code/templates/Views/Master/Main/ResourceType/template-resourcetype_collection.html

@@ -7,6 +7,7 @@
                 <th data-name="extension">Extension</th>
                 <th data-name="description">Description</th>
                 <th data-name="url">URL</th>
+                <th></th>
             </tr>
         </thead>
         <tbody>