Make details view responsive

src/ui/code-blocks/ShelfCodeBlockView.svelte

@@ -79,10 +79,5 @@
 				width: 80%;
 			}
 		}
-
-		table {
-			border-collapse: collapse;
-			width: 100%;
-		}
 	}
 </style>

src/ui/components/DetailsView.svelte

@@ -142,11 +142,12 @@
 </div>
 
 <style lang="scss">
+	@use "../styles/breakpoints";
+
 	.book-details-list {
 		display: flex;
 		flex-direction: column;
 		gap: var(--size-4-6);
-	}
 
 		.book-details {
 			display: flex;
@@ -196,4 +197,18 @@
 				}
 			}
 		}
+
+		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/styles/_breakpoints.scss

@@ -0,0 +1,73 @@
+$breakpoints: (
+	small: 480px,
+	medium: 720px,
+	large: 960px,
+	wide: 1200px,
+);
+
+@function next($name) {
+	$names: map-keys($breakpoints);
+	$n: index($names, $name);
+	@if not $n {
+		@error "Breakpoint `#{$name}` not found in `#{$breakpoints}`.";
+	}
+	@return if($n < length($names), nth($names, $n + 1), null);
+}
+
+@function min($name) {
+	$min: map-get($breakpoints, $name);
+	@return if($min != 0, $min, null);
+}
+
+@function max($name) {
+	$max: map-get($breakpoints, $name);
+	@return if($max and $max > 0, $max - 0.02, null);
+}
+
+@mixin up($name) {
+	$min: min($name);
+	@if $min {
+		@media (min-width: map-get($breakpoints, $name)) {
+			@content;
+		}
+	} @else {
+		@content;
+	}
+}
+
+@mixin down($name) {
+	$max: max($name);
+	@if $max {
+		@media (max-width: $max) {
+			@content;
+		}
+	} @else {
+		@content;
+	}
+}
+
+@mixin between($lower, $upper) {
+	$min: min($lower);
+	$max: max($upper);
+	@if $min != null and $max != null {
+		@media (min-width: $min) and (max-width: $max) {
+			@content;
+		}
+	} @else if $min != null {
+		@include up($lower) {
+			@content;
+		}
+	} @else if $max != null {
+		@include down($upper) {
+			@content;
+		}
+	}
+}
+
+@mixin only($name) {
+	$next: next($name);
+
+	@include between($name, $next) {
+		@content;
+	}
+}