Ensure dev-overlay-window is anchored to the bottom (#9222)

withastro · Nov 29, 2023 · 279e3c1 · 279e3c1
1 parent 49aa215
commit 279e3c1
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 1 deletion.
diff --git a/.changeset/famous-eels-trade.md b/.changeset/famous-eels-trade.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Ensure the dev-overlay-window is anchored to the bottom
diff --git a/packages/astro/src/runtime/client/dev-overlay/ui-library/window.ts b/packages/astro/src/runtime/client/dev-overlay/ui-library/window.ts
@@ -23,7 +23,8 @@ export class DevOverlayWindow extends HTMLElement {
 					color: rgba(204, 206, 216, 1);
 					position: fixed;
 					z-index: 999999999;
-					top: 55%;
+					/* -7.5em is a magic number that seems to keep it anchored with the dev bar */
+					bottom: calc(7.5% + -150px);
 					left: 50%;
 					transform: translate(-50%, -50%);
 					box-shadow: 0px 0px 0px 0px rgba(19, 21, 26, 0.30), 0px 1px 2px 0px rgba(19, 21, 26, 0.29), 0px 4px 4px 0px rgba(19, 21, 26, 0.26), 0px 10px 6px 0px rgba(19, 21, 26, 0.15), 0px 17px 7px 0px rgba(19, 21, 26, 0.04), 0px 26px 7px 0px rgba(19, 21, 26, 0.01);