From c6c9d4174314b29d771769001f63e9495aa0f699 Mon Sep 17 00:00:00 2001
From: Ming-jun Lu <40516784+mingjunlu@users.noreply.github.com>
Date: Sun, 24 Dec 2023 13:10:23 +0800
Subject: [PATCH 1/3] fix: prevent dev toolbar toolip from overflowing

---
 .../runtime/client/dev-overlay/plugins/utils/highlight.ts   | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/astro/src/runtime/client/dev-overlay/plugins/utils/highlight.ts b/packages/astro/src/runtime/client/dev-overlay/plugins/utils/highlight.ts
index 6ad37aad2af2..f7defec1f2e9 100644
--- a/packages/astro/src/runtime/client/dev-overlay/plugins/utils/highlight.ts
+++ b/packages/astro/src/runtime/client/dev-overlay/plugins/utils/highlight.ts
@@ -57,13 +57,17 @@ export function attachTooltipToHighlight(
 			const originalRect = originalElement.getBoundingClientRect();
 			const dialogRect = tooltip.getBoundingClientRect();
 
-			// If the tooltip is going to be off the screen, show it above the element instead
+			// Prevent the tooltip from being off the screen
 			if (originalRect.top < dialogRect.height) {
 				// Not enough space above, show below
 				tooltip.style.top = `${originalRect.height + 15}px`;
 			} else {
 				tooltip.style.top = `-${tooltip.offsetHeight}px`;
 			}
+			if (dialogRect.right > document.documentElement.clientWidth) {
+				// Not enough space on the right, align to the right
+        tooltip.style.right = '0px';
+      }
 		});
 	});
 

From 962dad461e7015d24e6ea6b673f7b48aaaa5059d Mon Sep 17 00:00:00 2001
From: Ming-jun Lu <40516784+mingjunlu@users.noreply.github.com>
Date: Sun, 24 Dec 2023 13:10:46 +0800
Subject: [PATCH 2/3] test: add a test case for dev toolbar toolip position

---
 packages/astro/e2e/dev-overlay.test.js        | 26 +++++++++++++++++++
 .../src/pages/tooltip-position.astro          | 21 +++++++++++++++
 2 files changed, 47 insertions(+)
 create mode 100644 packages/astro/e2e/fixtures/dev-overlay/src/pages/tooltip-position.astro

diff --git a/packages/astro/e2e/dev-overlay.test.js b/packages/astro/e2e/dev-overlay.test.js
index b61a3e10e756..0a0fca6dd4ce 100644
--- a/packages/astro/e2e/dev-overlay.test.js
+++ b/packages/astro/e2e/dev-overlay.test.js
@@ -139,6 +139,32 @@ test.describe('Dev Overlay', () => {
 		await expect(auditWindow.locator('astro-dev-toolbar-icon[icon=check-circle]')).toBeVisible();
 	});
 
+	test('adjusts tooltip position if off-screen', async ({ page, astro }) => {
+		await page.goto(astro.resolveUrl('/tooltip-position'));
+
+		const overlay = page.locator('astro-dev-toolbar');
+		const pluginButton = overlay.locator('button[data-plugin-id="astro:audit"]');
+		await pluginButton.click();
+
+		const auditCanvas = overlay.locator(
+			'astro-dev-toolbar-plugin-canvas[data-plugin-id="astro:audit"]'
+		);
+		const auditHighlights = auditCanvas.locator('astro-dev-toolbar-highlight');
+		for (const highlight of await auditHighlights.all()) {
+			await expect(highlight).toBeVisible();
+			await highlight.hover();
+			const tooltip = highlight.locator('astro-dev-toolbar-tooltip');
+			await expect(tooltip).toBeVisible();
+			const tooltipBox = await tooltip.boundingBox();
+			const { clientWidth, clientHeight } = await page.evaluate(() => ({
+				clientWidth: document.documentElement.clientWidth,
+				clientHeight: document.documentElement.clientHeight,
+			}));
+			expect(tooltipBox.x + tooltipBox.width).toBeLessThan(clientWidth);
+			expect(tooltipBox.y + tooltipBox.height).toBeLessThan(clientHeight);
+		}
+	});
+
 	test('can open Settings plugin', async ({ page, astro }) => {
 		await page.goto(astro.resolveUrl('/'));
 
diff --git a/packages/astro/e2e/fixtures/dev-overlay/src/pages/tooltip-position.astro b/packages/astro/e2e/fixtures/dev-overlay/src/pages/tooltip-position.astro
new file mode 100644
index 000000000000..a11ff40405ec
--- /dev/null
+++ b/packages/astro/e2e/fixtures/dev-overlay/src/pages/tooltip-position.astro
@@ -0,0 +1,21 @@
+---
+
+---
+
+<div>
+  <button role="top-left">Top left</button>
+  <button role="top-right">Top right</button>
+  <button role="bottom-left">Bottom left</button>
+  <button role="bottom-right">Bottom right</button>
+</div>
+
+<style>
+  div {
+    display: grid;
+    grid-template-columns: auto auto;
+    justify-content: space-between;
+    align-content: space-between;
+    height: 92vh;
+    padding: 20px;
+  }
+</style>

From f110d28a28b6037081980f39c28642356949c6d3 Mon Sep 17 00:00:00 2001
From: Bjorn Lu <bjornlu.dev@gmail.com>
Date: Tue, 26 Dec 2023 16:06:48 +0800
Subject: [PATCH 3/3] Create small-emus-deny.md

---
 .changeset/small-emus-deny.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/small-emus-deny.md

diff --git a/.changeset/small-emus-deny.md b/.changeset/small-emus-deny.md
new file mode 100644
index 000000000000..4926c0655c81
--- /dev/null
+++ b/.changeset/small-emus-deny.md
@@ -0,0 +1,5 @@
+---
+"astro": patch
+---
+
+Prevents dev toolbar tooltip from overflowing outside of the screen