From b67f404d8d6da4d1bcbe20266a3f005cc8cc49cd Mon Sep 17 00:00:00 2001
From: Rex Wang <109048808+RexWangPT@users.noreply.github.com>
Date: Fri, 12 Aug 2022 12:47:44 +0800
Subject: [PATCH] EE-3905 changes for item 1,2,3,4,9,10,12,13,14 (#7467)

---
 .../file-uploader/fileUploader.html           |  5 +++--
 .../files-datatable/filesDatatable.html       | 12 +++++------
 .../containerNetworksDatatable.html           |  4 ++--
 .../imageRegistry/por-image-registry.html     |  2 +-
 .../volumesCIFSForm/volumesCifsForm.html      | 10 +++++-----
 .../volumesNFSForm/volumesnfsForm.html        |  8 ++++----
 .../views/containers/console/attach.html      |  6 +++---
 .../containers/create/createcontainer.html    | 19 +++++++++---------
 app/docker/views/dashboard/dashboard.html     |  4 ++--
 .../views/services/create/createservice.html  | 16 ++++++++++-----
 .../services/create/includes/config.html      |  4 ++--
 .../services/create/includes/secret.html      |  2 +-
 .../views/services/edit/includes/mounts.html  | 10 +++++++---
 .../porAccessControlForm.html                 | 20 +++++++++----------
 14 files changed, 66 insertions(+), 56 deletions(-)

diff --git a/app/agent/components/file-uploader/fileUploader.html b/app/agent/components/file-uploader/fileUploader.html
index aced458fa..5ef1e8850 100644
--- a/app/agent/components/file-uploader/fileUploader.html
+++ b/app/agent/components/file-uploader/fileUploader.html
@@ -1,3 +1,4 @@
-<button type="button" ngf-select="$ctrl.onFileSelected($file)" class="btn ng-scope" button-spinner="$ctrl.state.uploadInProgress">
-  <i style="margin: 0" class="fa fa-upload" ng-if="!$ctrl.state.uploadInProgress"></i>
+<button ng-if="!$ctrl.state.uploadInProgress" type="button" ngf-select="$ctrl.onFileSelected($file)" class="btn ng-scope">
+  <pr-icon icon="'upload'" feather="true"></pr-icon>
 </button>
+<button ng-if="$ctrl.state.uploadInProgress" type="button" class="btn ng-scope" button-spinner="$ctrl.state.uploadInProgress"> </button>
diff --git a/app/agent/components/files-datatable/filesDatatable.html b/app/agent/components/files-datatable/filesDatatable.html
index d4d92a589..db3c7ecf8 100644
--- a/app/agent/components/files-datatable/filesDatatable.html
+++ b/app/agent/components/files-datatable/filesDatatable.html
@@ -9,7 +9,7 @@
           {{ $ctrl.titleText }}
         </div>
         <div class="searchBar vertical-center">
-          <pr-icon icon="'search'" feather="true"></pr-icon>
+          <pr-icon icon="'search'" feather="true" class-name="'searchIcon'"></pr-icon>
           <input
             type="text"
             class="searchInput"
@@ -64,7 +64,7 @@
             </tr>
             <tr ng-repeat="item in ($ctrl.state.filteredDataSet = ($ctrl.dataset | filter:$ctrl.state.textFilter | orderBy:$ctrl.state.orderBy:$ctrl.state.reverseOrder))">
               <td>
-                <span ng-if="item.edit">
+                <span ng-if="item.edit" class="vertical-center">
                   <input
                     class="input-sm"
                     type="text"
@@ -73,14 +73,12 @@
                     auto-focus
                   />
                   <a class="interactive" ng-click="item.edit = false;"><pr-icon icon="'x'" feather="true"></pr-icon></a>
-                  <a class="interactive" ng-click="$ctrl.rename({name: item.Name, newName: item.newName}); item.edit = false;"
-                    ><pr-icon icon="'check-square'" feather="true"></pr-icon
-                  ></a>
+                  <a class="interactive" ng-click="$ctrl.rename({name: item.Name, newName: item.newName}); item.edit = false;"><pr-icon icon="'check'" feather="true"></pr-icon></a>
                 </span>
                 <span ng-if="!item.edit && item.Dir">
-                  <a ng-click="$ctrl.browse({name: item.Name})"><pr-icon icon="'folder'" feather="true" class-name="space-right"></pr-icon>{{ item.Name }}</a>
+                  <a ng-click="$ctrl.browse({name: item.Name})" class="vertical-center"><pr-icon icon="'folder'" feather="true"></pr-icon>{{ item.Name }}</a>
                 </span>
-                <span ng-if="!item.edit && !item.Dir"><pr-icon icon="'file'" feather="true" class-name="space-right"></pr-icon>{{ item.Name }} </span>
+                <span ng-if="!item.edit && !item.Dir" class="vertical-center"><pr-icon icon="'file'" feather="true"></pr-icon>{{ item.Name }}</span>
               </td>
               <td>{{ item.Size | humansize }}</td>
               <td>
diff --git a/app/docker/components/datatables/container-networks-datatable/containerNetworksDatatable.html b/app/docker/components/datatables/container-networks-datatable/containerNetworksDatatable.html
index cba3b02d4..3fd2564d1 100644
--- a/app/docker/components/datatables/container-networks-datatable/containerNetworksDatatable.html
+++ b/app/docker/components/datatables/container-networks-datatable/containerNetworksDatatable.html
@@ -66,8 +66,8 @@
                   button-spinner="$ctrl.leaveNetworkActionInProgress"
                   ng-click="$ctrl.leaveNetworkAction($ctrl.container, key)"
                 >
-                  <span ng-hide="$ctrl.leaveNetworkActionInProgress"> <pr-icon icon="'trash-2'" feather="true" class-name="'icon-secondary icon-md'"></pr-icon> Leave network</span>
-                  <span ng-show="$ctrl.leaveNetworkActionInProgress">Leaving network...</span>
+                  <span ng-if="!$ctrl.leaveNetworkActionInProgress" class="vertical-center !ml-0"> <pr-icon icon="'trash-2'" feather="true"></pr-icon> Leave network</span>
+                  <span ng-if="$ctrl.leaveNetworkActionInProgress">Leaving network...</span>
                 </button>
               </td>
             </tr>
diff --git a/app/docker/components/imageRegistry/por-image-registry.html b/app/docker/components/imageRegistry/por-image-registry.html
index 2d2be5f65..4d1215fcc 100644
--- a/app/docker/components/imageRegistry/por-image-registry.html
+++ b/app/docker/components/imageRegistry/por-image-registry.html
@@ -36,7 +36,7 @@
             title="Search image on Docker Hub"
             target="_blank"
           >
-            <i class="fab fa-docker text-blue-6"></i> Search
+            <pr-icon icon="'svg-docker'" size="'lg'"></pr-icon> Search
           </a>
         </span>
       </div>
diff --git a/app/docker/components/volumesCIFSForm/volumesCifsForm.html b/app/docker/components/volumesCIFSForm/volumesCifsForm.html
index a94e10c37..40a41c121 100644
--- a/app/docker/components/volumesCIFSForm/volumesCifsForm.html
+++ b/app/docker/components/volumesCIFSForm/volumesCifsForm.html
@@ -10,7 +10,7 @@
       </div>
     </div>
     <div class="form-group col-md-12" ng-show="cifsInformationForm.cifs_address.$invalid">
-      <div class="small">
+      <div class="small text-warning">
         <div ng-messages="cifsInformationForm.cifs_address.$error">
           <p ng-message="required"> <pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> This field is required.</p>
         </div>
@@ -25,7 +25,7 @@
       </div>
     </div>
     <div class="form-group col-md-12" ng-show="cifsInformationForm.cifs_share.$invalid">
-      <div class="small">
+      <div class="small text-warning">
         <div ng-messages="cifsInformationForm.cifs_share.$error">
           <p ng-message="required"> <pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> This field is required.</p>
         </div>
@@ -40,7 +40,7 @@
       </div>
     </div>
     <div class="form-group col-md-12" ng-show="cifsInformationForm.cifs_version.$invalid">
-      <div class="small">
+      <div class="small text-warning">
         <div ng-messages="cifsInformationForm.cifs_version.$error">
           <p ng-message="required"> <pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> This field is required.</p>
         </div>
@@ -55,7 +55,7 @@
       </div>
     </div>
     <div class="form-group col-md-12" ng-show="cifsInformationForm.cifs_username.$invalid">
-      <div class="small">
+      <div class="small text-warning">
         <div ng-messages="cifsInformationForm.cifs_username.$error">
           <p ng-message="required"> <pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> This field is required.</p>
         </div>
@@ -70,7 +70,7 @@
       </div>
     </div>
     <div class="form-group col-md-12" ng-show="cifsInformationForm.password.$invalid">
-      <div class="small">
+      <div class="small text-warning">
         <div ng-messages="cifsInformationForm.cifs_password.$error">
           <p ng-message="required"> <pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> This field is required.</p>
         </div>
diff --git a/app/docker/components/volumesNFSForm/volumesnfsForm.html b/app/docker/components/volumesNFSForm/volumesnfsForm.html
index 1294344c7..17d964f42 100644
--- a/app/docker/components/volumesNFSForm/volumesnfsForm.html
+++ b/app/docker/components/volumesNFSForm/volumesnfsForm.html
@@ -10,7 +10,7 @@
       </div>
     </div>
     <div class="form-group col-md-12" ng-show="nfsInformationForm.nfs_address.$invalid">
-      <div class="small">
+      <div class="small text-warning">
         <div ng-messages="nfsInformationForm.nfs_address.$error">
           <p ng-message="required"> <pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> This field is required.</p>
         </div>
@@ -25,7 +25,7 @@
       </div>
     </div>
     <div class="form-group col-md-12" ng-show="nfsInformationForm.nfs_version.$invalid">
-      <div class="small">
+      <div class="small text-warning">
         <div ng-messages="nfsInformationForm.nfs_version.$error">
           <p ng-message="required"> <pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> This field is required.</p>
         </div>
@@ -47,7 +47,7 @@
       </div>
     </div>
     <div class="form-group col-md-12" ng-show="nfsInformationForm.nfs_mountpoint.$invalid">
-      <div class="small">
+      <div class="small text-warning">
         <div ng-messages="nfsInformationForm.nfs_mountpoint.$error">
           <p ng-message="required"> <pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> This field is required.</p>
         </div>
@@ -65,7 +65,7 @@
       </div>
     </div>
     <div class="form-group col-md-12" ng-show="nfsInformationForm.nfs_options.$invalid">
-      <div class="small">
+      <div class="small text-warning">
         <div ng-messages="nfsInformationForm.nfs_options.$error">
           <p ng-message="required"> <pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> This field is required.</p>
         </div>
diff --git a/app/docker/views/containers/console/attach.html b/app/docker/views/containers/console/attach.html
index f927f32d1..3e96401d3 100644
--- a/app/docker/views/containers/console/attach.html
+++ b/app/docker/views/containers/console/attach.html
@@ -15,21 +15,21 @@
     <rd-widget>
       <rd-widget-header icon="terminal" feather-icon="true" title-text="Attach"></rd-widget-header>
       <rd-widget-body>
-        <div class="small" ng-if="!container.Config.OpenStdin">
+        <div class="small text-warning" ng-if="!container.Config.OpenStdin">
           <p>
             <pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon>
             The interactive-flag is not set. You might not be able to use the console properly.
           </p>
         </div>
 
-        <div class="small" ng-if="!container.Config.Tty">
+        <div class="small text-warning" ng-if="!container.Config.Tty">
           <p>
             <pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon>
             The TTY-flag is not set. You might not be able to use the console properly.
           </p>
         </div>
 
-        <div class="small text-danger" ng-hide="container.State.Running">
+        <div class="small text-warning" ng-hide="container.State.Running">
           <p>
             <pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon>
             The container is not running.
diff --git a/app/docker/views/containers/create/createcontainer.html b/app/docker/views/containers/create/createcontainer.html
index 90b82cc8e..56dda9540 100644
--- a/app/docker/views/containers/create/createcontainer.html
+++ b/app/docker/views/containers/create/createcontainer.html
@@ -17,15 +17,15 @@
         <form class="form-horizontal" autocomplete="off">
           <!-- name-input -->
           <div class="form-group">
-            <label for="container_name" class="col-sm-1 control-label text-left">Name</label>
-            <div class="col-sm-11">
+            <label for="container_name" class="col-sm-2 control-label text-left">Name</label>
+            <div class="col-sm-10">
               <input type="text" class="form-control" ng-model="config.name" id="container_name" placeholder="e.g. myContainer" />
             </div>
           </div>
           <!-- !name-input -->
           <div class="col-sm-12 form-section-title"> Image configuration </div>
           <div ng-if="!formValues.RegistryModel.Registry && fromContainer">
-            <i class="fa fa-exclamation-triangle orange-icon" aria-hidden="true"></i>
+            <pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon>
             <span class="small text-danger" style="margin-left: 5px">
               The Docker registry for the <code>{{ config.Image }}</code> image is not registered inside Portainer, you will not be able to create a container. Please register that
               registry first.
@@ -39,10 +39,10 @@
               auto-complete="true"
               label-class="col-sm-1"
               input-class="col-sm-11"
-              on-image-change="onImageNameChange()"
               endpoint="endpoint"
               is-admin="isAdmin"
               check-rate-limits="formValues.alwaysPull"
+              on-image-change="onImageNameChange()"
               set-validity="setPullImageValidity"
             >
               <!-- always-pull -->
@@ -63,6 +63,7 @@
             </por-image-registry>
             <!-- !image-and-registry -->
           </div>
+
           <!-- create-webhook -->
           <div ng-if="isAdmin && applicationState.endpoint.type !== 4">
             <div class="col-sm-12 form-section-title"> Webhooks </div>
@@ -127,8 +128,8 @@
                 <!-- protocol-actions -->
                 <div class="input-group col-sm-3 input-group-sm">
                   <div class="btn-group btn-group-sm">
-                    <label class="btn btn-primary" ng-model="portBinding.protocol" uib-btn-radio="'tcp'">TCP</label>
-                    <label class="btn btn-primary" ng-model="portBinding.protocol" uib-btn-radio="'udp'">UDP</label>
+                    <label class="btn btn-light" ng-model="portBinding.protocol" uib-btn-radio="'tcp'">TCP</label>
+                    <label class="btn btn-light" ng-model="portBinding.protocol" uib-btn-radio="'udp'">UDP</label>
                   </div>
                   <button class="btn btn-light" type="button" ng-click="removePortBinding($index)">
                     <pr-icon icon="'trash-2'" feather="true" class-name="'icon-secondary icon-md'"></pr-icon>
@@ -170,7 +171,7 @@
                 type="button"
                 class="btn btn-primary btn-sm"
                 ng-disabled="state.actionInProgress || !formValues.RegistryModel.Image || (!formValues.RegistryModel.Registry && fromContainer)
-                             || (fromContainer.IsPortainer && fromContainer.Name === '/' + config.name)"
+                   || (fromContainer.IsPortainer && fromContainer.Name === '/' + config.name)"
                 ng-click="create()"
                 button-spinner="state.actionInProgress"
               >
@@ -348,8 +349,8 @@
                       <span class="input-group-addon">value</span>
                       <input type="text" class="form-control" ng-model="opt.value" placeholder="e.g. bar" />
                     </div>
-                    <button class="btn btn-sm btn-danger" type="button" ng-click="removeLogDriverOpt($index)">
-                      <i class="fa fa-trash" aria-hidden="true"></i>
+                    <button class="btn btn-light" type="button" ng-click="removeLogDriverOpt($index)">
+                      <pr-icon icon="'trash-2'" feather="true" class-name="'icon-secondary icon-md'"></pr-icon>
                     </button>
                   </div>
                 </div>
diff --git a/app/docker/views/dashboard/dashboard.html b/app/docker/views/dashboard/dashboard.html
index f9d9c6f0a..3b3abd8b9 100644
--- a/app/docker/views/dashboard/dashboard.html
+++ b/app/docker/views/dashboard/dashboard.html
@@ -17,12 +17,12 @@
 >
   <span class="small">
     <p class="text-muted" ng-if="applicationState.endpoint.mode.role === 'MANAGER'">
-      <i class="fa fa-exclamation-circle orange-icon" aria-hidden="true" style="margin-right: 2px"></i>
+      <pr-icon icon="'alert-circle'" mode="'primary'" feather="true"></pr-icon>
       Portainer is connected to a node that is part of a Swarm cluster. Some resources located on other nodes in the cluster might not be available for management, have a look at
       <a href="http://portainer.readthedocs.io/en/stable/agent.html" target="_blank">our agent setup</a> for more details.
     </p>
     <p class="text-muted" ng-if="applicationState.endpoint.mode.role === 'WORKER'">
-      <i class="fa fa-exclamation-circle orange-icon" aria-hidden="true" style="margin-right: 2px"></i>
+      <pr-icon icon="'alert-circle'" mode="'primary'" feather="true"></pr-icon>
       Portainer is connected to a worker node. Swarm management features will not be available.
     </p>
   </span>
diff --git a/app/docker/views/services/create/createservice.html b/app/docker/views/services/create/createservice.html
index 696bc880b..07f43648f 100644
--- a/app/docker/views/services/create/createservice.html
+++ b/app/docker/views/services/create/createservice.html
@@ -7,8 +7,8 @@
         <form class="form-horizontal" autocomplete="off">
           <!-- name-input -->
           <div class="form-group">
-            <label for="service_name" class="col-sm-1 control-label text-left">Name</label>
-            <div class="col-sm-11">
+            <label for="service_name" class="col-sm-2 control-label text-left">Name</label>
+            <div class="col-sm-10">
               <input type="text" class="form-control" ng-model="formValues.Name" id="service_name" placeholder="e.g. myService" />
             </div>
           </div>
@@ -266,7 +266,9 @@
                             <span class="input-group-addon">container</span>
                             <input type="text" class="form-control" ng-model="volume.Target" placeholder="e.g. /path/in/container" />
                           </div>
-                          <div class="small" ng-show="!volume.Target"> <pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> Target is required. </div>
+                          <div class="small text-warning" ng-show="!volume.Target">
+                            <pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> Target is required.
+                          </div>
                         </div>
                         <!-- !container-path -->
                         <!-- volume-type -->
@@ -299,7 +301,9 @@
                               <option selected disabled value="">Select a volume</option>
                             </select>
                           </div>
-                          <div class="small" ng-show="!volume.Source"> <pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> Source is required. </div>
+                          <div class="small text-warning" ng-show="!volume.Source">
+                            <pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> Source is required.
+                          </div>
                         </div>
                         <!-- !volume -->
                         <!-- bind -->
@@ -308,7 +312,9 @@
                             <span class="input-group-addon">host</span>
                             <input type="text" class="form-control" ng-model="volume.Source" placeholder="e.g. /path/on/host" />
                           </div>
-                          <div class="small" ng-show="!volume.Source"> <pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> Source is required. </div>
+                          <div class="small text-warning" ng-show="!volume.Source">
+                            <pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> Source is required.
+                          </div>
                         </div>
                         <!-- !bind -->
                         <!-- read-only -->
diff --git a/app/docker/views/services/create/includes/config.html b/app/docker/views/services/create/includes/config.html
index 188d802a0..c0350786c 100644
--- a/app/docker/views/services/create/includes/config.html
+++ b/app/docker/views/services/create/includes/config.html
@@ -8,7 +8,7 @@
     </div>
     <!-- info message -->
     <div class="form-group" ng-show="formValues.Configs.$invalid" style="margin-bottom: 0px">
-      <div class="col-sm-12 small" style="padding-left: 35px; padding-top: 20px">
+      <div class="col-sm-12 small text-warning" style="padding-left: 35px; padding-top: 20px">
         <pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> {{ formValues.Configs.$error }}
       </div>
     </div>
@@ -16,7 +16,7 @@
       <div ng-repeat="config in formValues.Configs" style="margin-top: 2px">
         <div class="input-group col-sm-4 input-group-sm">
           <span class="input-group-addon">config</span>
-          <select class="form-control" ng-model="config.model" ng-change="checkIfConfigDuplicated()" ng-options="config.Name for config in availableConfigs | orderBy: 'Name'">
+          <select class="form-control" ng-change="checkIfConfigDuplicated()" ng-model="config.model" ng-options="config.Name for config in availableConfigs | orderBy: 'Name'">
             <option value="" selected="selected">Select a config</option>
           </select>
         </div>
diff --git a/app/docker/views/services/create/includes/secret.html b/app/docker/views/services/create/includes/secret.html
index 8e8f458aa..42e0af3ae 100644
--- a/app/docker/views/services/create/includes/secret.html
+++ b/app/docker/views/services/create/includes/secret.html
@@ -14,7 +14,7 @@
     </div>
     <!-- info message -->
     <div class="form-group" ng-show="formValues.Secrets.$invalid" style="margin-bottom: 0px">
-      <div class="col-sm-12 small" style="padding-left: 35px; padding-top: 20px">
+      <div class="col-sm-12 small text-warning" style="padding-left: 35px; padding-top: 20px">
         <pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> {{ formValues.Secrets.$error }}
       </div>
     </div>
diff --git a/app/docker/views/services/edit/includes/mounts.html b/app/docker/views/services/edit/includes/mounts.html
index 167364d2d..aa21d6fef 100644
--- a/app/docker/views/services/edit/includes/mounts.html
+++ b/app/docker/views/services/edit/includes/mounts.html
@@ -40,9 +40,9 @@
               <select
                 class="form-control"
                 ng-model="mount.Source"
+                ng-change="updateMount(service, mount)"
                 ng-options="vol.Id as ((vol.Id|truncate:30) + ' - ' + (vol.Driver|truncate:30))  for vol in availableVolumes"
                 ng-if="mount.Type === 'volume'"
-                ng-change="updateMount(service, mount)"
                 disable-authorization="DockerServiceUpdate"
               >
                 <option selected disabled hidden value="">Select a volume</option>
@@ -57,7 +57,9 @@
                 ng-disabled="isUpdating || (!isAdmin && !allowBindMounts && mount.Type === 'bind')"
                 ng-if="mount.Type === 'bind'"
               />
-              <div class="col-sm-12 small" ng-show="!mount.Source"> <pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> Source is required. </div>
+              <div class="col-sm-12 small text-warning" ng-show="!mount.Source">
+                <pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> Source is required.
+              </div>
             </td>
             <td>
               <input
@@ -69,7 +71,9 @@
                 ng-disabled="isUpdating"
                 disable-authorization="DockerServiceUpdate"
               />
-              <div class="col-sm-12 small" ng-show="!mount.Target"> <pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> Target is required. </div>
+              <div class="col-sm-12 small text-warning" ng-show="!mount.Target">
+                <pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> Target is required.
+              </div>
             </td>
             <td authorization="DockerServiceUpdate">
               <input type="checkbox" class="form-control" ng-model="mount.ReadOnly" ng-change="updateMount(service, mount)" ng-disabled="isUpdating" />
diff --git a/app/portainer/components/accessControlForm/porAccessControlForm.html b/app/portainer/components/accessControlForm/porAccessControlForm.html
index 606b027c3..4d39d33c0 100644
--- a/app/portainer/components/accessControlForm/porAccessControlForm.html
+++ b/app/portainer/components/accessControlForm/porAccessControlForm.html
@@ -69,8 +69,8 @@
     class="form-group mt-4"
     ng-if="$ctrl.formData.AccessControlEnabled && $ctrl.formData.Ownership === $ctrl.RCO.RESTRICTED && ($ctrl.isAdmin || (!$ctrl.isAdmin && $ctrl.availableTeams.length > 1))"
   >
-    <div class="col-sm-12">
-      <label for="group-access" class="control-label text-left col-sm-3 col-sm-2 !p-0">
+    <div class="col-sm-12 vertical-center">
+      <label for="group-access" class="control-label text-left col-sm-3 col-lg-2 !p-0">
         Authorized teams
         <portainer-tooltip
           ng-if="$ctrl.isAdmin && $ctrl.availableTeams.length > 0"
@@ -84,9 +84,10 @@
       <span ng-if="$ctrl.isAdmin && $ctrl.availableTeams.length === 0" class="small text-muted" style="margin-left: 20px">
         You have not yet created any teams. Head over to the <a ui-sref="portainer.teams">Teams view</a> to manage teams.
       </span>
-      <span
+      <div
         isteven-multi-select
         ng-if="($ctrl.isAdmin && $ctrl.availableTeams.length > 0) || (!$ctrl.isAdmin && $ctrl.availableTeams.length > 1)"
+        class="col-sm-9 col-lg-10"
         input-model="$ctrl.availableTeams"
         output-model="$ctrl.formData.AuthorizedTeams"
         button-label="Name"
@@ -95,17 +96,16 @@
         helper-elements="filter"
         search-property="Name"
         translation="{nothingSelected: 'Select one or more teams', search: 'Search...'}"
-        style="margin-left: 20px"
         data-cy="portainer-selectTeamAccess"
       >
-      </span>
+      </div>
     </div>
   </div>
   <!-- !authorized-teams -->
   <!-- authorized-users -->
   <div class="form-group" ng-if="$ctrl.formData.AccessControlEnabled && $ctrl.formData.Ownership === $ctrl.RCO.RESTRICTED && $ctrl.isAdmin">
-    <div class="col-sm-12">
-      <label for="group-access" class="control-label text-left col-sm-3 col-sm-2 !p-0">
+    <div class="col-sm-12 vertical-center">
+      <label for="group-access" class="control-label text-left col-sm-3 col-lg-2 !p-0">
         Authorized users
         <portainer-tooltip
           ng-if="$ctrl.isAdmin && $ctrl.availableUsers.length > 0"
@@ -115,9 +115,10 @@
       <span ng-if="$ctrl.availableUsers.length === 0" class="small text-muted" style="margin-left: 20px">
         You have not yet created any users. Head over to the <a ui-sref="portainer.users">Users view</a> to manage users.
       </span>
-      <span
+      <div
         isteven-multi-select
         ng-if="$ctrl.availableUsers.length > 0"
+        class="col-sm-9 col-lg-10"
         input-model="$ctrl.availableUsers"
         output-model="$ctrl.formData.AuthorizedUsers"
         button-label="Username"
@@ -126,10 +127,9 @@
         helper-elements="filter"
         search-property="Username"
         translation="{nothingSelected: 'Select one or more users', search: 'Search...'}"
-        style="margin-left: 20px"
         data-cy="portainer-selectUserAccess"
       >
-      </span>
+      </div>
     </div>
   </div>
   <!-- !authorized-users -->