diff --git a/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.html b/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.html index 505171f9d..63e2933d5 100644 --- a/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.html +++ b/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.html @@ -3,7 +3,7 @@ class="block-overview-tooltip" [class.clickable]="clickable" [style.visibility]="tx ? 'visible' : 'hidden'" - [style.left]="tooltipPosition.x + 'px'" + [style.left]="getTooltipLeftPosition()" [style.top]="tooltipPosition.y + 'px'" > diff --git a/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.scss b/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.scss index df34ce346..507d4c18d 100644 --- a/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.scss +++ b/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.scss @@ -10,7 +10,7 @@ padding: 10px 15px; text-align: left; min-width: 340px; - max-width: 340px; + max-width: 400px; pointer-events: none; z-index: 11; @@ -41,7 +41,7 @@ th, td { flex-wrap: wrap; row-gap: 0.25em; margin-top: 0.2em; - max-width: 100%; + max-width: 310px; .badge { border-radius: 0.2rem; diff --git a/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.ts b/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.ts index e77dec716..d59bfa87f 100644 --- a/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.ts +++ b/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.ts @@ -96,4 +96,8 @@ export class BlockOverviewTooltipComponent implements OnChanges { this.cd.markForCheck(); } } + + getTooltipLeftPosition(): string { + return window.innerWidth < 392 ? '-50px' : this.tooltipPosition.x + 'px'; + } }