reverts to page scroll instead of reader content scroll

src/app/[readerMode]/_components/Footer.tsx

@@ -14,9 +14,6 @@ export const Footer = () => (
 			mx: 'auto',
 			my: '20',
 			placeContent: 'center',
-			sm: {
-				my: '32',
-			},
 			textAlign: 'center',
 			w: 'full',
 		})}

src/app/[readerMode]/_components/ReaderControls/ChapterPicker/BookList.tsx

@@ -18,14 +18,11 @@ export const BookList = ({
 			key={book.code}
 			isCurrBook={book.code === currBookCode}
 			isFirstEl={bookIndex === 0}
+			onClick={() => {
+				onListItemClick()
+				setSelectedBook(book)
+			}}
 		>
-			<BookListItem
-				onClick={() => {
-					onListItemClick()
-					setSelectedBook(book)
-				}}
-			>
-				{book.book_name?.name}
-			</BookListItem>
+			<BookListItem>{book.book_name?.name}</BookListItem>
 		</BookListItemContainer>
 	))

src/app/[readerMode]/_components/ReaderControls/ReaderControls.tsx

@@ -10,7 +10,6 @@ import { type TBook } from '~/db'
 
 import { ChapterPicker } from './ChapterPicker'
 import { ReaderNavButton } from './ReaderNavButton'
-import { useResetReaderScrollOnParamChange } from './useResetReaderScrollOnParamChange'
 
 export const ReaderControls = ({ bookList }: { bookList: TBook[] }) => {
 	const {
@@ -27,8 +26,6 @@ export const ReaderControls = ({ bookList }: { bookList: TBook[] }) => {
 		throw new Error('No book data')
 	}
 
-	useResetReaderScrollOnParamChange(currBook.code, chapter)
-
 	const currBookIndex = bookList.findIndex(
 		(book) => book.book_name?.name === currBook.book_name?.name,
 	)
@@ -63,7 +60,10 @@ export const ReaderControls = ({ bookList }: { bookList: TBook[] }) => {
 			className={cx(
 				macrogrid({
 					bg: 'bg.canvas',
+					bottom: '0',
 					column: 'fullbleed',
+					position: 'sticky',
+					w: 'full',
 				}),
 			)}
 		>

src/app/[readerMode]/layout.tsx

@@ -5,18 +5,15 @@ import { getBookListWithCache } from '~/db'
 import { Footer } from './_components/Footer'
 import { Header } from './_components/Header'
 import { ReaderControls } from './_components/ReaderControls'
-import { ReaderPageContainer } from './_components/ReaderPageContainer'
 
 const Layout = async ({ children }: { children: ReactNode }) => {
 	const bookList = await getBookListWithCache()
 
 	return (
 		<>
-			<ReaderPageContainer>
-				<Header />
-				{children}
-				<Footer />
-			</ReaderPageContainer>
+			<Header />
+			{children}
+			<Footer />
 			<ReaderControls bookList={bookList} />
 		</>
 	)

src/app/layout.tsx

@@ -75,9 +75,9 @@ const RootLayout = ({ children }: { children: ReactNode }) => (
 					background: 'bg.canvas',
 					color: 'fg',
 					fontSize: 'base',
-					gridTemplateRows: '1fr min-content',
-					h: '100dvh',
-					overflow: 'clip',
+					gridTemplateRows: 'min-content 1fr min-content',
+					minH: 'screen',
+					overscrollBehavior: 'contain',
 				})}
 			>
 				{children}