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';
+ }
}