From 7e5135d99e0421cf4ab621d626667eb38064926f Mon Sep 17 00:00:00 2001
From: Evan Fiordeliso <evan.fiordeliso@gmail.com>
Date: Mon, 7 Jul 2025 22:26:27 -0400
Subject: [PATCH] Make bookshelf full width on small screens

---
 src/ui/code-blocks/ShelfCodeBlockView.svelte |  6 +++++
 src/ui/components/DetailsView.svelte         | 23 +++++++++-----------
 src/ui/components/bookshelf/Bookshelf.svelte |  6 ++++-
 3 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/src/ui/code-blocks/ShelfCodeBlockView.svelte b/src/ui/code-blocks/ShelfCodeBlockView.svelte
index 6babdee..cf06213 100644
--- a/src/ui/code-blocks/ShelfCodeBlockView.svelte
+++ b/src/ui/code-blocks/ShelfCodeBlockView.svelte
@@ -66,8 +66,14 @@
 
 <style lang="scss">
 	.shelf-code-block {
+		container: bookshelf / inline-size;
+
 		.controls {
 			margin-bottom: 1rem;
+
+			@container (width < 600px) {
+				width: 100% !important;
+			}
 		}
 
 		&.bookshelf-view {
diff --git a/src/ui/components/DetailsView.svelte b/src/ui/components/DetailsView.svelte
index bb79691..807467a 100644
--- a/src/ui/components/DetailsView.svelte
+++ b/src/ui/components/DetailsView.svelte
@@ -162,6 +162,16 @@
 				max-width: 30%;
 			}
 
+			@container (width < 600px) {
+				flex-direction: column;
+				align-items: center;
+
+				img {
+					max-height: 30rem;
+					max-width: 100%;
+				}
+			}
+
 			.book-info {
 				display: flex;
 				flex-direction: column;
@@ -198,18 +208,5 @@
 				}
 			}
 		}
-
-		container: book-details-list / inline-size;
-		@container book-details-list (width < 600px) {
-			.book-details {
-				flex-direction: column;
-				align-items: center;
-
-				img {
-					max-height: 30rem;
-					max-width: 100%;
-				}
-			}
-		}
 	}
 </style>
diff --git a/src/ui/components/bookshelf/Bookshelf.svelte b/src/ui/components/bookshelf/Bookshelf.svelte
index 5a7ff2c..900a106 100644
--- a/src/ui/components/bookshelf/Bookshelf.svelte
+++ b/src/ui/components/bookshelf/Bookshelf.svelte
@@ -18,7 +18,6 @@
 	div.bookshelf {
 		width: 80%;
 		margin: 0 auto;
-		min-height: 100vh;
 		min-height: calc(bookshelf.$height + bookshelf.$shelf-width);
 		background-image: linear-gradient(
 			color.scale(bookshelf.$color, $lightness: -32%),
@@ -52,5 +51,10 @@
 		display: flex;
 		flex-wrap: wrap;
 		gap: bookshelf.$shelf-width bookshelf.$book-spacing;
+
+		container: bookshelf / inline-size;
+		@container bookshelf (width < 600px) {
+			width: 100%;
+		}
 	}
 </style>