Make bookshelf full width on small screens

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 {

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>

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>