Merge pull request #7904 from opf/fix/31732-Dropdown-for-table-highlighting-configuration-is-off-place

[31732] Dropdown for table highlighting configuration is off place

[ci skip]

frontend/src/app/components/wp-table/configuration-modal/tabs/highlighting-tab.component.html

@@ -7,9 +7,8 @@
   </enterprise-banner>
   <form>
     <p [textContent]="text.highlighting_mode.description"></p>
-    <div class="form--field -full-width">
-      <div class="form--field-container">
-        <label class="option-label -multi-line">
+    <div class="form--field">
+      <label class="form--label">
         <input type="radio"
                [attr.disabled]="disabledValue(eeShowBanners)"
                [(ngModel)]="highlightingMode"
@@ -19,6 +18,8 @@
         <span [textContent]="text.highlighting_mode.inline"></span>&nbsp;
       </label>
       
+      <div class="form--field-container">
+        <div class="form--select-container">
           <ng-select #highlightedAttributesNgSelect
                      [items]="availableInlineHighlightedAttributes"
                      [(ngModel)]="selectedAttributes"
@@ -28,16 +29,17 @@
                      [closeOnSelect]="false"
                      (open)="onOpen(highlightedAttributesNgSelect)"
                      (change)="updateHighlightingAttributes($event)"
-                   class="-multi-select"
+                     class="form--select-field -multi-select"
                      bindLabel="name"
                      name="highlighting_attributes"
                      appendTo="body">
           </ng-select>
         </div>
       </div>
-    <div class="form--field -full-width">
-      <div class="form--field-container">
-        <label class="option-label">
+    </div>
+
+    <div class="form--field">
+      <label class="form--label">
         <input type="radio"
                [attr.disabled]="disabledValue(eeShowBanners)"
                [(ngModel)]="entireRowMode"
@@ -47,6 +49,8 @@
         <span [textContent]="text.highlighting_mode.entire_row_by"></span>
       </label>
 
+      <div class="form--field-container">
+        <div class="form--select-container">
           <ng-select #rowHighlightNgSelect
                      [items]="availableRowHighlightedAttributes"
                      [(ngModel)]="lastEntireRowAttribute"
@@ -58,13 +62,15 @@
                      bindValue="value"
                      name="selected_attribute"
                      appendTo="body"
-                   id="selected_attribute">
+                     id="selected_attribute"
+                     class="form--select-field">
           </ng-select>
         </div>
       </div>
-    <div class="form--field -full-width">
-      <div class="form--field-container">
-        <label class="option-label">
+    </div>
+
+    <div class="form--field">
+      <label class="form--label">
         <input type="radio"
                [attr.disabled]="disabledValue(eeShowBanners)"
                [(ngModel)]="highlightingMode"
@@ -74,6 +80,5 @@
         <span [textContent]="text.highlighting_mode.none"></span>
       </label>
     </div>
-    </div>
   </form>
 </div>