From 114f07828df4d164b68b2840ab6dc27ee568a72f Mon Sep 17 00:00:00 2001
From: Jake Coble <j@kecoble.com>
Date: Tue, 3 Dec 2024 14:57:41 -0500
Subject: [PATCH] Make the book grid out of floats

---
 .../organisms/passageNavigation.module.scss   | 28 +++++++++++++------
 .../organisms/passageNavigation.tsx           | 14 ++++++++--
 2 files changed, 30 insertions(+), 12 deletions(-)

diff --git a/src/components/organisms/passageNavigation.module.scss b/src/components/organisms/passageNavigation.module.scss
index 6ef9053a3..e3d64b9de 100644
--- a/src/components/organisms/passageNavigation.module.scss
+++ b/src/components/organisms/passageNavigation.module.scss
@@ -23,10 +23,10 @@
 	padding-bottom: 16px;
 }
 
-.wrapper .books:global(.grid) {
-	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
-}
+// .wrapper .books:global(.grid) {
+// 	display: grid;
+// 	grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
+// }
 
 .wrapper li,
 .wrapper li button,
@@ -53,9 +53,9 @@
 	width: 100%;
 }
 
-.books:global(.grid) .chapters {
-	grid-column: 1 / -1;
-}
+// .books:global(.grid) .chapters {
+// 	grid-column: 1 / -1;
+// }
 
 .chapters {
 	display: grid;
@@ -92,9 +92,19 @@
 	font-size: 12px;
 	line-height: 14.4px;
 	text-transform: uppercase;
-	display: inline-block;
 }
 
 .chaptersWrapper {
-	grid-column: 1 / -1;
+	width: 100%;
+	display: none;
+}
+
+.chaptersWrapper:global(.active) {
+	display: block;
+	float: left;
+}
+
+.books:global(.grid) .book {
+	width: 70px;
+	display: inline-block;
 }
diff --git a/src/components/organisms/passageNavigation.tsx b/src/components/organisms/passageNavigation.tsx
index f70a6762f..e2a4d306b 100644
--- a/src/components/organisms/passageNavigation.tsx
+++ b/src/components/organisms/passageNavigation.tsx
@@ -55,9 +55,17 @@ export default function PassageNavigation({ books }: Props): JSX.Element {
 										: book.title}
 								</button>
 							</li>
-							{book.id === selectedBook && selectedView === 'list' ? (
-								<li className={styles.chaptersWrapper}>
-									<ul className={styles.chapters}>
+							{book.id === selectedBook ? (
+								<li
+									className={clsx(styles.chaptersWrapper, {
+										active: book.id === selectedBook,
+									})}
+								>
+									<ul
+										className={clsx(styles.chapters, {
+											active: book.id === selectedBook,
+										})}
+									>
 										{chapters?.map((chapter) => {
 											const n = Number(chapter.title.split(' ').pop());
 											return (