Merge pull request #2552 from kirbydesign/bug/2500-dropdown-opening-d…

…irection

Fix dropdown opening direction when button intersects bottom of viewport

libs/designsystem/src/lib/components/dropdown/dropdown.component.ts

@@ -20,6 +20,7 @@ import {
   ViewChildren,
 } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { DesignTokenHelper } from '../../helpers';
 
 import { ButtonComponent } from '../button/button.component';
 import { CardComponent } from '../card/card.component';
@@ -277,8 +278,15 @@ export class DropdownComponent implements AfterViewInit, OnDestroy, ControlValue
   private initializeAlignment() {
     if (this.usePopover) return;
     if (!this.intersectionObserverRef) {
+      // Get the design token size of the button. In the button stylesheet a medium button height is utils.size(xl)
+      // and a small button height is utils.size("l")
+      const designTokenSizeHeight = this.size === 'md' ? 'xl' : 'l';
+
+      // Setting the rootMargin equal to the height of the button
+      // allows the Intersection Observer Callback to be called
+      // even if the dropdown button is intersecting with the viewport
       const options = {
-        rootMargin: '0px',
+        rootMargin: DesignTokenHelper.size(designTokenSizeHeight),
       };
       const callback: IntersectionObserverCallback = (entries) => {
         // Only apply alignment when opening: