Custom date range overflowing with page level time ranges (#1499)

* fix: overflow for custom date range

Author: Christian862

projects/components/src/page-time-range/page-time-range.component.ts

@@ -2,13 +2,23 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { ActivatedRoute, UrlSegment } from '@angular/router';
 import { LoggerService, NavigationService, PageTimeRangePreferenceService, TimeRange } from '@hypertrace/common';
 import { isNil } from 'lodash-es';
+import { PopoverRelativePositionLocation } from '../popover/popover';
 
 @Component({
   selector: 'ht-page-time-range',
-  template: ` <ht-time-range (timeRangeSelected)="this.onTimeRangeSelected($event)"></ht-time-range> `,
+  template: `
+    <ht-time-range
+      [dropdownLocationPreference]="this.dropdownLocationPreference"
+      (timeRangeSelected)="this.onTimeRangeSelected($event)"
+    ></ht-time-range>
+  `,
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class PageTimeRangeComponent {
+  public readonly dropdownLocationPreference: PopoverRelativePositionLocation[] = [
+    PopoverRelativePositionLocation.BelowRightAligned
+  ];
+
   public constructor(
     private readonly pageTimeRangePreferenceService: PageTimeRangePreferenceService,
     private readonly navigationService: NavigationService,

projects/components/src/time-range/time-range.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, NgZone, Output } from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, NgZone, Output } from '@angular/core';
 import { IconType } from '@hypertrace/assets-library';
 import {
   FixedTimeRange,
@@ -12,6 +12,7 @@ import { concat, EMPTY, interval, Observable, of, timer } from 'rxjs';
 import { map, startWith } from 'rxjs/operators';
 import { ButtonRole, ButtonSize } from '../button/button';
 import { IconSize } from '../icon/icon-size';
+import { PopoverRelativePositionLocation } from '../popover/popover';
 import { PopoverRef } from '../popover/popover-ref';
 
 @Component({
@@ -21,7 +22,11 @@ import { PopoverRef } from '../popover/popover-ref';
   template: `
     <div class="time-range" *ngIf="this.timeRange$ | async as timeRange">
       <div class="time-range-selector">
-        <ht-popover (popoverOpen)="this.onPopoverOpen($event)" [closeOnNavigate]="false">
+        <ht-popover
+          (popoverOpen)="this.onPopoverOpen($event)"
+          [closeOnNavigate]="false"
+          [locationPreferences]="this.dropdownLocationPreference"
+        >
           <ht-popover-trigger>
             <div class="trigger">
               <ht-icon class="trigger-icon" icon="${IconType.Calendar}" size="${IconSize.Medium}"></ht-icon>
@@ -67,6 +72,14 @@ import { PopoverRef } from '../popover/popover-ref';
   `
 })
 export class TimeRangeComponent {
+  @Input()
+  public dropdownLocationPreference: PopoverRelativePositionLocation[] = [
+    PopoverRelativePositionLocation.BelowLeftAligned,
+    PopoverRelativePositionLocation.BelowRightAligned,
+    PopoverRelativePositionLocation.AboveLeftAligned,
+    PopoverRelativePositionLocation.AboveRightAligned
+  ];
+
   public timeRange$: Observable<TimeRange> = this.timeRangeService.getTimeRangeAndChanges();
 
   private popoverRef: PopoverRef | undefined;