diff --git a/src/assets/styles/common-texts.scss b/src/assets/styles/common-texts.scss index 0e9194e..9959674 100644 --- a/src/assets/styles/common-texts.scss +++ b/src/assets/styles/common-texts.scss @@ -149,6 +149,10 @@ pre { @include mixins.line-clamp(4); } +.clamp-5 { + @include mixins.line-clamp(5); +} + .no-wrap { white-space: nowrap; } diff --git a/src/lib/help-mode/help-button/help-button.component.ts b/src/lib/help-mode/help-button/help-button.component.ts index 984c562..e7a949f 100644 --- a/src/lib/help-mode/help-button/help-button.component.ts +++ b/src/lib/help-mode/help-button/help-button.component.ts @@ -1,5 +1,5 @@ /* eslint-disable @angular-eslint/prefer-on-push-component-change-detection */ -import { AfterViewInit, Component, ElementRef, Input, OnDestroy, OnInit } from '@angular/core'; +import { AfterViewInit, Component, ElementRef, HostListener, Input, OnDestroy, OnInit } from '@angular/core'; import { HelpModeService } from '../index'; @Component({ @@ -34,7 +34,7 @@ export class HelpButtonComponent implements OnInit, AfterViewInit, OnDestroy { if (this.helpModeButton) { setTimeout(() => { const currentComponentRect = currentComponent.getBoundingClientRect(); - this.helpModeButton.style.setProperty('position', 'fixed'); + this.helpModeButton.style.setProperty('position', 'absolute'); this.helpModeButton.style.setProperty('top', `${currentComponentRect.top}px`); this.helpModeButton.style.setProperty('left', `${currentComponentRect.left}px`); document.body.appendChild(this.helpModeButton); @@ -57,4 +57,12 @@ export class HelpButtonComponent implements OnInit, AfterViewInit, OnDestroy { } this.helpModeService.activateHelpMode(this.dialogButton); } + + @HostListener('window:resize', ['$event']) + onResize() { + const currentComponent = this._elementRef.nativeElement; + const currentComponentRect = currentComponent.getBoundingClientRect(); + this.helpModeButton?.style.setProperty('top', `${currentComponentRect.top}px`); + this.helpModeButton?.style.setProperty('left', `${currentComponentRect.left}px`); + } }