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
}