From 1fcac45870913c338605941d9c907dfe55c8f59c Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 28 Oct 2024 08:43:43 -0400
Subject: [PATCH] fix menu dead zone (#679)

---
 .../site-kit/src/lib/components/Banner.svelte |  2 +-
 .../site-kit/src/lib/components/Shell.svelte  | 10 +++----
 .../site-kit/src/lib/docs/DocsContents.svelte | 28 -------------------
 packages/site-kit/src/lib/nav/Nav.svelte      |  6 ++--
 .../src/lib/nav/NavContextMenu.svelte         |  3 --
 5 files changed, 9 insertions(+), 40 deletions(-)

diff --git a/packages/site-kit/src/lib/components/Banner.svelte b/packages/site-kit/src/lib/components/Banner.svelte
index e7e041eba..436dc05a1 100644
--- a/packages/site-kit/src/lib/components/Banner.svelte
+++ b/packages/site-kit/src/lib/components/Banner.svelte
@@ -99,7 +99,7 @@
 		display: initial;
 	}
 
-	@media (min-width: 800px) {
+	@media (min-width: 832px) {
 		.banner {
 			top: initial;
 			bottom: 0;
diff --git a/packages/site-kit/src/lib/components/Shell.svelte b/packages/site-kit/src/lib/components/Shell.svelte
index 5ad0a960e..8478b4484 100644
--- a/packages/site-kit/src/lib/components/Shell.svelte
+++ b/packages/site-kit/src/lib/components/Shell.svelte
@@ -51,15 +51,15 @@ The main shell of the application. It provides a slot for the top navigation, th
 	main {
 		position: relative;
 		margin: 0 auto;
-		padding-top: var(--sk-nav-height);
-		padding-bottom: var(--sk-banner-height);
+		padding-top: var(--sk-banner-height);
+		padding-bottom: 0;
 		height: 100%;
 	}
 
-	@media (max-width: 799px) {
+	@media (min-width: 832px) {
 		main {
-			padding-top: var(--sk-banner-height);
-			padding-bottom: 0;
+			padding-top: var(--sk-nav-height);
+			padding-bottom: var(--sk-banner-height);
 		}
 	}
 </style>
diff --git a/packages/site-kit/src/lib/docs/DocsContents.svelte b/packages/site-kit/src/lib/docs/DocsContents.svelte
index 48e9d1a3d..0cbd55c80 100644
--- a/packages/site-kit/src/lib/docs/DocsContents.svelte
+++ b/packages/site-kit/src/lib/docs/DocsContents.svelte
@@ -109,32 +109,6 @@
 		margin: 0;
 	}
 
-	@media (max-width: 831px) {
-		.sidebar {
-			padding: 1rem;
-			padding-top: 1rem;
-		}
-
-		li {
-			margin-bottom: 2.5rem;
-		}
-
-		a {
-			border-radius: var(--sk-border-radius);
-			line-height: 1;
-			vertical-align: center;
-			padding: 0.9rem 0.75rem !important;
-			transition: 0.1s ease;
-			transition-property: background-color, color;
-		}
-
-		a:hover {
-			text-decoration: none;
-
-			background-color: var(--sk-back-4);
-		}
-	}
-
 	@media (min-width: 832px) {
 		.sidebar {
 			columns: 1;
@@ -163,8 +137,6 @@
 			z-index: 2;
 			position: absolute;
 			rotate: 45deg;
-			/** needed to synchronise with transition on `*` in `base.css` */
-			transition: background-color 0.5s var(--quint-out);
 			box-shadow: 0 0 3px rgba(0, 0, 0, 0.12);
 		}
 	}
diff --git a/packages/site-kit/src/lib/nav/Nav.svelte b/packages/site-kit/src/lib/nav/Nav.svelte
index 7537643bb..170e04f54 100644
--- a/packages/site-kit/src/lib/nav/Nav.svelte
+++ b/packages/site-kit/src/lib/nav/Nav.svelte
@@ -217,7 +217,7 @@ Top navigation bar for the application. It provides a slot for the left side, th
 		font: var(--sk-font-ui-medium);
 	}
 
-	@media (max-width: 799px) {
+	@media (max-width: 831px) {
 		nav {
 			transition: transform 0.2s;
 		}
@@ -305,7 +305,7 @@ Top navigation bar for the application. It provides a slot for the left side, th
 		display: block;
 	}
 
-	@media (max-width: 799px) {
+	@media (max-width: 831px) {
 		nav {
 			top: unset;
 			bottom: 0;
@@ -337,7 +337,7 @@ Top navigation bar for the application. It provides a slot for the left side, th
 		}
 	}
 
-	@media (min-width: 800px) {
+	@media (min-width: 832px) {
 		.home-link {
 			--padding-right: 2rem;
 			width: 13.2rem;
diff --git a/packages/site-kit/src/lib/nav/NavContextMenu.svelte b/packages/site-kit/src/lib/nav/NavContextMenu.svelte
index 8e94c99b8..8251e2b00 100644
--- a/packages/site-kit/src/lib/nav/NavContextMenu.svelte
+++ b/packages/site-kit/src/lib/nav/NavContextMenu.svelte
@@ -108,10 +108,7 @@
 	a {
 		display: flex;
 		align-items: center;
-		border-radius: var(--sk-border-radius);
 		color: var(--sk-text-2);
-		transition: 0.1s ease;
-		transition-property: background-color, color;
 
 		&[aria-current='page'] {
 			color: var(--sk-theme-1) !important;