diff --git a/srcjs/stendhal/sprite/SpeechBubble.ts b/srcjs/stendhal/sprite/SpeechBubble.ts
index c37aca62ad4..2ee39823a63 100644
--- a/srcjs/stendhal/sprite/SpeechBubble.ts
+++ b/srcjs/stendhal/sprite/SpeechBubble.ts
@@ -54,20 +54,24 @@ export class SpeechBubble extends TextBubble {
 		}
 
 		const x = this.getX(), y = this.getY();
-		Speech.drawBubbleRounded(ctx, x, y - 15, this.width, this.height);
+		Speech.drawBubbleRounded(ctx, x, y, this.width, this.height);
 
 		ctx.fillStyle = "#000000";
-		ctx.fillText(this.text, x + 4, y);
+		ctx.fillText(this.text, x + 4, y + TextBubble.adjustY);
 
 		return this.expired();
 	}
 
 	override getX(): number {
-		return this.entity["_x"] * 32 + (32 * this.entity["width"]);
+		const x = this.entity["_x"] * 32 + (32 * this.entity["width"]);
+		// keep on screen (border is 1 pixel)
+		const overdraw = x + this.width - (stendhal.ui.gamewindow.offsetX + stendhal.ui.gamewindow.width) + 1;
+		return overdraw > 0 ? x - overdraw : x;
 	}
 
 	override getY(): number {
-		return this.entity["_y"] * 32 - 16 - (32 * (this.entity["height"]
-				- 1)) + this.offsetY;
+		const y = this.entity["_y"] * 32 - 16 - (32 * (this.entity["height"] - 1)) + this.offsetY - TextBubble.adjustY;
+		// keep on screen (border is 1 pixel)
+		return y < 1 ? 1 : y;
 	}
 }
diff --git a/srcjs/stendhal/sprite/TextBubble.ts b/srcjs/stendhal/sprite/TextBubble.ts
index 487669f8f5d..b78b1f3b790 100644
--- a/srcjs/stendhal/sprite/TextBubble.ts
+++ b/srcjs/stendhal/sprite/TextBubble.ts
@@ -15,6 +15,7 @@ declare var stendhal: any;
 export abstract class TextBubble {
 
 	protected static readonly STANDARD_DUR = 5000;
+	protected static readonly adjustY = 15;
 
 	protected text: string;
 	protected timeStamp: number;
@@ -104,7 +105,7 @@ export abstract class TextBubble {
 		const pointX = evt.clientX - screenRect.x
 				+ stendhal.ui.gamewindow.offsetX;
 		const pointY = evt.clientY - screenRect.y
-				+ stendhal.ui.gamewindow.offsetY + 15;
+				+ stendhal.ui.gamewindow.offsetY + TextBubble.adjustY;
 
 		if (this.clipsPoint(pointX, pointY)) {
 			evt.stopPropagation();
diff --git a/srcjs/stendhal/ui/ViewPort.ts b/srcjs/stendhal/ui/ViewPort.ts
index d3118aa0fc4..e312e5366f2 100644
--- a/srcjs/stendhal/ui/ViewPort.ts
+++ b/srcjs/stendhal/ui/ViewPort.ts
@@ -44,6 +44,10 @@ export class ViewPort {
 	private offsetY = 0;
 	private timeStamp = Date.now();
 
+	// dimensions
+	private readonly width: number;
+	private readonly height: number;
+
 	private ctx: CanvasRenderingContext2D;
 	private readonly targetTileWidth = 32;
 	private readonly targetTileHeight = 32;
@@ -75,7 +79,10 @@ export class ViewPort {
 	 * Hidden singleton constructor.
 	 */
 	private constructor() {
-		this.ctx = (document.getElementById("gamewindow")! as HTMLCanvasElement).getContext("2d")!;
+		const element = document.getElementById("gamewindow")! as HTMLCanvasElement;
+		this.ctx = element.getContext("2d")!;
+		this.width = element.width;
+		this.height = element.height;
 	}
 
 	draw() {