fix(service): service related UI issues [EE-4062] (#7943)

app/portainer/components/environment-variables-panel/environment-variables-simple-mode/environment-variables-simple-mode.html

@@ -6,6 +6,15 @@
     <pr-icon icon="'alert-circle'" mode="'primary'"></pr-icon>
     Switch to advanced mode to copy & paste multiple variables
   </div>
+  <div class="col-sm-12 form-inline env-items-list">
+    <environment-variables-simple-mode-item
+      ng-repeat="variable in $ctrl.ngModel"
+      variable="variable"
+      index="$index"
+      on-change="($ctrl.onChangeVariable)"
+      on-remove="($ctrl.remove)"
+    ></environment-variables-simple-mode-item>
+  </div>
   <div class="col-sm-12 environment-variables-simple-mode--actions">
     <button type="button" class="btn btn-sm btn-default" ng-click="$ctrl.add()"> <pr-icon icon="'plus'"></pr-icon> Add an environment variable </button>
     <button
@@ -24,15 +33,6 @@
       File too large! Try uploading a file smaller than 1MB
     </span>
   </div>
-  <div class="col-sm-12 form-inline env-items-list">
-    <environment-variables-simple-mode-item
-      ng-repeat="variable in $ctrl.ngModel"
-      variable="variable"
-      index="$index"
-      on-change="($ctrl.onChangeVariable)"
-      on-remove="($ctrl.remove)"
-    ></environment-variables-simple-mode-item>
-  </div>
   <div class="col-sm-12 small text-muted" ng-if="$ctrl.ngModel.length > 0 && $ctrl.showHelpMessage">
     <pr-icon icon="'alert-circle'" mode="'primary'"></pr-icon>
     Environment changes will not take effect until redeployment occurs manually or via webhook.

app/portainer/react/components/switch-field.ts

@@ -5,6 +5,7 @@ import { SwitchField } from '@@/form-components/SwitchField';
 export const switchField = r2a(SwitchField, [
   'tooltip',
   'checked',
+  'index',
   'label',
   'name',
   'labelClass',