From 296b64dbda2ef28bdea4b704ed789a009d8423e9 Mon Sep 17 00:00:00 2001
From: Edmund Hung <me@edmund.dev>
Date: Sat, 16 Mar 2024 14:05:13 +0100
Subject: [PATCH] fix layout and test

---
 app/layout.tsx          | 10 +++++++---
 app/styles.css          |  7 +++++++
 tests/e2e/index.test.ts |  2 +-
 3 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/app/layout.tsx b/app/layout.tsx
index 95458a7..224b0d8 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -2,7 +2,7 @@ import chevronUpIcon from '~/assets/chevron-up.svg';
 import chevronRightIcon from '~/assets/chevron-right.svg';
 import remixLetterLogo from '~/assets/remix-letter-light.svg';
 import { Link, useLocation } from '@remix-run/react';
-import { Fragment, useLayoutEffect, useRef } from 'react';
+import { Fragment, useEffect, useLayoutEffect, useRef } from 'react';
 
 export interface Menu {
 	title: string;
@@ -12,6 +12,9 @@ export interface Menu {
 	}>;
 }
 
+export const useSafeLayoutEffect =
+	typeof document === 'undefined' ? useEffect : useLayoutEffect;
+
 export function Breadcrumbs({
 	locationKey,
 	trails,
@@ -23,7 +26,7 @@ export function Breadcrumbs({
 }) {
 	const detailsRef = useRef<HTMLDetailsElement>(null);
 
-	useLayoutEffect(() => {
+	useSafeLayoutEffect(() => {
 		if (detailsRef.current) {
 			detailsRef.current.open = false;
 		}
@@ -32,6 +35,7 @@ export function Breadcrumbs({
 	return (
 		<>
 			<details
+				id="breadcrumbs"
 				ref={detailsRef}
 				className="group peer h-12 border-t bg-white open:bg-neutral-100 hover:bg-neutral-100 lg:hidden"
 			>
@@ -62,7 +66,7 @@ export function Breadcrumbs({
 					</div>
 				</summary>
 			</details>
-			<div className="fixed inset-x-0 bottom-12 hidden max-h-[calc(100vh-3rem)] flex-1 overflow-y-auto border-t bg-white peer-open:block lg:relative lg:inset-x-auto lg:bottom-auto lg:flex lg:max-h-none">
+			<div className="fixed inset-x-0 bottom-12 top-0 hidden max-h-[calc(100vh-3rem)] flex-1 overflow-y-auto border-t bg-white peer-open:block lg:relative lg:inset-x-auto lg:bottom-auto lg:flex lg:max-h-none">
 				{children}
 			</div>
 		</>
diff --git a/app/styles.css b/app/styles.css
index 2956f9f..b1e01eb 100644
--- a/app/styles.css
+++ b/app/styles.css
@@ -8,3 +8,10 @@
 summary.marker\:content-none::-webkit-details-marker {
 	display: none;
 }
+
+/**
+ * To prevent the background scrolling when the navigation overlay is opened
+ */
+html:has(details#breadcrumbs[open]) {
+	overflow: hidden;
+}
diff --git a/tests/e2e/index.test.ts b/tests/e2e/index.test.ts
index 4c58589..6380e60 100644
--- a/tests/e2e/index.test.ts
+++ b/tests/e2e/index.test.ts
@@ -9,7 +9,7 @@ test('shows the package name', async ({ page }) => {
 
 	const title = page.getByRole('heading', {
 		name: 'remix-cloudflare-template',
-		level: 2,
+		level: 1,
 	});
 
 	await expect(title).toBeVisible();