Minor style fixes

Author: costas80

gitb-ui/ui/src/app/components/checkbox-option-panel/checkbox-option-panel.component.ts

@@ -196,6 +196,9 @@ export class CheckboxOptionPanelComponent implements OnInit, OnDestroy, CheckBox
     const popup = this.containerDiv.firstElementChild as HTMLElement;
     if (!popup) return;
     if (this.placement == 'left') {
+      // The 2px gap matches ng-bootstrap's dropdown default Popper offset, kept consistent with
+      // the 'bottom' placement's gap below.
+      const gap = 2;
       const popupHeight = popup.offsetHeight;
       let top = btnRect.top + scrollY;
       if (btnRect.top + popupHeight > window.innerHeight) {
@@ -206,7 +209,7 @@ export class CheckboxOptionPanelComponent implements OnInit, OnDestroy, CheckBox
         }
       }
       popup.style.top = `${top}px`;
-      popup.style.left = `${btnRect.left + scrollX - popup.offsetWidth}px`;
+      popup.style.left = `${btnRect.left + scrollX - popup.offsetWidth - gap}px`;
     } else {
       // Same flip-if-no-room approach as the 'left' placement above, but along the vertical axis:
       // open below the button by default, flipping to open above it if there isn't enough room

gitb-ui/ui/src/app/components/multi-select-filter/multi-select-filter.component.ts

@@ -75,6 +75,7 @@ export class MultiSelectFilterComponent<T extends EntityWithId> implements OnIni
   replaceItemsSubscription?: Subscription
   replaceSelectedItemsSubscription?: Subscription
   clearItemsSubscription?: Subscription
+  popupSubscription?: Subscription
   private resizeTimer?: ReturnType<typeof setTimeout>
 
   focusedSelectedItemIndex?: number
@@ -137,6 +138,11 @@ export class MultiSelectFilterComponent<T extends EntityWithId> implements OnIni
     if (this.config.initialValues != undefined) {
       this.replaceSelectedItems(this.config.initialValues)
     }
+    this.popupSubscription = this.dataService.onButtonPopupOpen$.subscribe((source => {
+      if (source !== this && this.formVisible) {
+        this.close()
+      }
+    }))
     this.ready.emit(this.config.name)
   }
 
@@ -254,6 +260,7 @@ export class MultiSelectFilterComponent<T extends EntityWithId> implements OnIni
     if (this.replaceItemsSubscription) this.replaceItemsSubscription.unsubscribe()
     if (this.replaceSelectedItemsSubscription) this.replaceSelectedItemsSubscription.unsubscribe()
     if (this.clearItemsSubscription) this.clearItemsSubscription.unsubscribe()
+    if (this.popupSubscription) this.popupSubscription.unsubscribe()
     clearTimeout(this.resizeTimer)
   }
 
@@ -445,6 +452,7 @@ export class MultiSelectFilterComponent<T extends EntityWithId> implements OnIni
     if (this.formVisible) {
       this.close()
     } else {
+      this.dataService.signalButtonPopup(this)
       this.formVisible = true
       this.formPositioned = false
       this.updateCheckFlag()
@@ -501,6 +509,9 @@ export class MultiSelectFilterComponent<T extends EntityWithId> implements OnIni
   }
 
   private adjustHeight(minHeight: number, onPositioned?: () => void) {
+    // The 2px gap matches ng-bootstrap's dropdown default Popper offset, and the same gap used
+    // by the checkbox-option-panel component's popup positioning.
+    const gap = 2;
     this.availableItemsHeight = minHeight;
     setTimeout(() => {
       if (this.filterFormElement && this.filterControlElement) {
@@ -526,16 +537,16 @@ export class MultiSelectFilterComponent<T extends EntityWithId> implements OnIni
           controlTop = 0
         }
         const maxHeight = window.innerHeight
-        const formBottom = controlBottom + formHeight
-        const formTop = controlTop - formHeight
+        const formBottom = (controlBottom??0) + gap + formHeight
+        const formTop = controlTop - gap - formHeight
         fitsBottom = formBottom <= maxHeight
         fitsTop = formTop > 0
         if (fitsBottom) {
-          this.formTop = controlHeight
+          this.formTop = controlHeight + gap
           this.formPositioned = true
           onPositioned?.()
         } else if (fitsTop) {
-          this.formTop = formHeight * -1
+          this.formTop = (formHeight + gap) * -1
           this.formPositioned = true
           onPositioned?.()
         } else {