diff --git a/src-ui/src/app/components/common/preview-popup/preview-popup.component.html b/src-ui/src/app/components/common/preview-popup/preview-popup.component.html index 0bf21029b..84c65a49f 100644 --- a/src-ui/src/app/components/common/preview-popup/preview-popup.component.html +++ b/src-ui/src/app/components/common/preview-popup/preview-popup.component.html @@ -1,6 +1,7 @@ + autoClose="true" [popoverClass]="popoverClass()" [popperOptions]="popperOptions" + (mouseenter)="mouseEnterPreview()" (mouseleave)="mouseLeavePreview()" #popover="ngbPopover"> diff --git a/src-ui/src/app/components/common/preview-popup/preview-popup.component.spec.ts b/src-ui/src/app/components/common/preview-popup/preview-popup.component.spec.ts index 10a36d73c..3194729ff 100644 --- a/src-ui/src/app/components/common/preview-popup/preview-popup.component.spec.ts +++ b/src-ui/src/app/components/common/preview-popup/preview-popup.component.spec.ts @@ -67,6 +67,10 @@ describe('PreviewPopupComponent', () => { expect(component.useNativePdfViewer).toBeTruthy() }) + it('should use fixed positioning for the preview popover', () => { + expect(component.popperOptions({}).strategy).toEqual('fixed') + }) + it('should render object if native PDF viewer enabled', () => { settingsService.set(SETTINGS_KEYS.USE_NATIVE_PDF_VIEWER, true) component.popover.open() diff --git a/src-ui/src/app/components/common/preview-popup/preview-popup.component.ts b/src-ui/src/app/components/common/preview-popup/preview-popup.component.ts index ae271ffe4..fc7ce7e4b 100644 --- a/src-ui/src/app/components/common/preview-popup/preview-popup.component.ts +++ b/src-ui/src/app/components/common/preview-popup/preview-popup.component.ts @@ -8,6 +8,7 @@ import { ViewChild, } from '@angular/core' import { NgbPopover, NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap' +import { Options } from '@popperjs/core' import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons' import { first, Subject, takeUntil } from 'rxjs' import { Document } from 'src/app/data/document' @@ -74,6 +75,11 @@ export class PreviewPopupComponent implements OnDestroy { readonly popoverClass = signal('shadow popover-preview') + readonly popperOptions = (options: Partial): Partial => ({ + ...options, + strategy: 'fixed', + }) + get renderAsObject(): boolean { return (this.isPdf && this.useNativePdfViewer) || !this.isPdf }