[JENKINS-64972] Help-buttons are not working when they are at the top…

… of draggable div (jenkinsci#5316)

* [JENKINS-64972] Help-buttons are not working when they are at the top of draggable div

The 'dd-handle' div will make all events in that div (e.g. click event of a button) not triggered, so I move the help-button out of the 'dd-handle' div.
In order to make the button still at the right of the same line, I use flex to realize.

* [JENKINS-64972] Move style to CSS file

core/src/main/resources/lib/form/hetero-list.jelly

@@ -87,8 +87,8 @@ THE SOFTWARE.
             <div colspan="3">
               <div class="${attrs.disableDragAndDrop or readOnlyMode ? '' : 'dd-handle'}">
                 <b>${descriptor.displayName}</b>
-                <f:helpLink url="${help}"/>
               </div>
+              <f:helpLink url="${help}"/>
             </div>
           </div>
           <!-- TODO: help support is unintuitive; people should be able to see help from drop-down menu -->

war/src/main/less/base/style.less

@@ -1280,6 +1280,14 @@ textarea.rich-editor {
 
 /* ========================= D&D support in heterogenous/repeatable lists = */
 
+.hetero-list-container .has-help {
+    display: flex;
+}
+
+.hetero-list-container .has-help .dd-handle {
+    flex: 1;
+}
+
 .hetero-list-container .dd-handle,
 .repeated-container .dd-handle {
     cursor: move;