Fix alignment

src/app/shared/access-control-form-container/access-control-array-form/access-control-array-form.component.html

@@ -6,21 +6,22 @@
   <ng-container *ngFor="let control of accessControl.controls; let i = index">
     <div [formGroup]="$any(control)"
          class="mt-3" data-testId="access-control-item"
-         style="display: grid; grid-template-columns: 1fr 1fr 1fr 50px; grid-gap: 5px">
+         style="display: grid; grid-template-columns: 1fr 50px; grid-gap: 10px">
 
+      <div class="d-flex flex-column">
         <div>
-        <label for="accesscontroloption">{{'access-control-option' | translate}}</label>
+          <label for="accesscontroloption">{{'access-control-option-label' | translate}}</label>
           <select id="accesscontroloption" formControlName="itemName" class="form-control">
             <option value=""></option>
             <option *ngFor="let option of dropdownOptions" [value]="option.name">
               {{ option.name }}
             </option>
           </select>
+          <small class="form-text text-muted">{{'access-control-option-note' | translate}}</small>
         </div>
 
-      <div [class.d-none]="control.get('endDate')?.disabled">
+        <div class="input-group" [class.d-none]="control.get('endDate')?.disabled">
-        <div class="input-group">
+          <label for="accesscontrolstartdate">{{'access-control-option-start-date' | translate}}</label>
-          <label for="accesscontrolstartdate">{{'access-control-start-date' | translate}}</label>
           <input
             id="accesscontrolstartdate"
             class="form-control"
@@ -37,12 +38,11 @@
                     (click)="d.toggle()"
                     type="button"></button>
           </div>
-        </div>
+          <small class="form-text text-muted">{{'access-control-option-start-date-note' | translate}}</small>
         </div>
 
-      <div [class.d-none]="control.get('endDate')?.disabled">
+        <div class="input-group" [class.d-none]="control.get('endDate')?.disabled">
-        <label for="accesscontrolenddate">{{'access-control-end-date' | translate}}</label>
+          <label for="accesscontrolenddate">{{'access-control-option-end-date' | translate}}</label>
-        <div class="input-group">
           <input
             id="accesscontrolenddate"
             class="form-control"
@@ -59,11 +59,14 @@
                     (click)="d1.toggle()">
             </button>
           </div>
+          <small class="form-text text-muted">{{'access-control-option-end-date-note' | translate}}</small>
         </div>
       </div>
 
       <div>
         <label>&nbsp;</label>
+        <div class="input-group">
+
           <button type="button" class="btn btn-outline-danger"
                   [disabled]="form.status === 'DISABLED'"
                   (click)="removeAccessControlItem(i)">
@@ -71,6 +74,7 @@
           </button>
         </div>
       </div>
+    </div>
 
   </ng-container>
 

src/assets/i18n/en.json5

@@ -5358,23 +5358,53 @@
   "admin.system-wide-alert.title": "System-wide Alerts",
 
   "item-access-control-title": "This form allows you to perform changes to the access condition of all the item's metadata and all its bitstreams.",
+
   "collection-access-control-title": "This form allows you to perform changes to the access condition of all the items owned by collection under this community. Changes can be performed on the access condition for the metadata (item) or for the content (bitstream).",
+
   "community-access-control-title": "This form allows you to perform changes to the access condition of all the items owned by collection under this community. Changes can be performed on the access condition for the metadata (item) or for the content (bitstream).",
+
   "access-control-item-header-toggle": "Item's Metadata",
+
   "access-control-bitstream-header-toggle": "Bitstreams",
+
   "access-control-mode": "Mode",
+
   "access-control-access-conditions": "Access conditions",
+
   "access-control-no-access-conditions-warning-message": "You have not specified any access conditions, the new items access conditions will be inherited from the owning collection.",
+
   "access-control-replace-all": "Replace access conditions",
+
   "access-control-add-to-existing": "Add to existing ones",
+
   "access-control-limit-to-specific": "Limit the changes to specific bitstreams",
+
   "access-control-process-all-bitstreams": "process all the bitstreams in the item",
+
   "access-control-bitstreams-selected": "bitstreams selected",
+
   "access-control-reset": "Reset",
+
   "access-control-execute": "Execute",
+
   "access-control-add-more": "Add more",
+
   "access-control-select-bitstreams-modal.title": "Select bitstreams",
+
   "access-control-select-bitstreams-modal.no-items": "No items to show.",
+
   "access-control-select-bitstreams-modal.close": "Close",
 
+  "access-control-option-label": "Access condition type",
+
+  "access-control-option-note": "Select an access condition to apply on the bitstream once the item is deposited",
+
+  "access-control-option-start-date": "Grant access from",
+
+  "access-control-option-start-date-note": "Select the date from which the relate access condition is applied",
+
+  "access-control-option-end-date": "Grant access until",
+
+  "access-control-option-end-date-note": "Select the date until which the relate access condition is applied",
+
 }