From dc7b84f28716335891e5fa4237db7edc5390a6db Mon Sep 17 00:00:00 2001
From: Evan Fiordeliso <evan.fiordeliso@gmail.com>
Date: Mon, 7 Jul 2025 18:41:51 -0400
Subject: [PATCH] Make details view responsive

---
 src/ui/code-blocks/ShelfCodeBlockView.svelte |  5 -
 src/ui/components/DetailsView.svelte         | 99 +++++++++++---------
 src/ui/styles/_breakpoints.scss              | 73 +++++++++++++++
 3 files changed, 130 insertions(+), 47 deletions(-)
 create mode 100644 src/ui/styles/_breakpoints.scss

diff --git a/src/ui/code-blocks/ShelfCodeBlockView.svelte b/src/ui/code-blocks/ShelfCodeBlockView.svelte
index 1615dae..b376287 100644
--- a/src/ui/code-blocks/ShelfCodeBlockView.svelte
+++ b/src/ui/code-blocks/ShelfCodeBlockView.svelte
@@ -79,10 +79,5 @@
 				width: 80%;
 			}
 		}
-
-		table {
-			border-collapse: collapse;
-			width: 100%;
-		}
 	}
 </style>
diff --git a/src/ui/components/DetailsView.svelte b/src/ui/components/DetailsView.svelte
index 12bb08e..e87277e 100644
--- a/src/ui/components/DetailsView.svelte
+++ b/src/ui/components/DetailsView.svelte
@@ -142,57 +142,72 @@
 </div>
 
 <style lang="scss">
+	@use "../styles/breakpoints";
+
 	.book-details-list {
 		display: flex;
 		flex-direction: column;
 		gap: var(--size-4-6);
-	}
 
-	.book-details {
-		display: flex;
-		align-items: start;
-		gap: 1rem;
-		background-color: var(--background-secondary);
-		border-radius: var(--radius-l);
-
-		img {
+		.book-details {
+			display: flex;
+			align-items: start;
+			gap: 1rem;
+			background-color: var(--background-secondary);
 			border-radius: var(--radius-l);
-			max-width: 30%;
+
+			img {
+				border-radius: var(--radius-l);
+				max-width: 30%;
+			}
+
+			.book-info {
+				display: flex;
+				flex-direction: column;
+				gap: var(--size-4-2);
+				padding: var(--size-4-4);
+
+				h2,
+				p {
+					margin: 0;
+				}
+
+				hr {
+					margin: var(--size-4-2) 0;
+				}
+
+				.authors,
+				.series {
+					font-size: var(--font-small);
+					color: var(--text-muted);
+				}
+
+				.description {
+					max-height: 30rem;
+					overflow-y: auto;
+				}
+
+				.footer {
+					font-size: var(--font-smaller);
+					color: var(--text-muted);
+					display: flex;
+					gap: var(--size-2-2);
+					align-items: center;
+					flex-wrap: wrap;
+				}
+			}
 		}
 
-		.book-info {
-			display: flex;
-			flex-direction: column;
-			gap: var(--size-4-2);
-			padding: var(--size-4-4);
-
-			h2,
-			p {
-				margin: 0;
-			}
-
-			hr {
-				margin: var(--size-4-2) 0;
-			}
-
-			.authors,
-			.series {
-				font-size: var(--font-small);
-				color: var(--text-muted);
-			}
-
-			.description {
-				max-height: 30rem;
-				overflow-y: auto;
-			}
-
-			.footer {
-				font-size: var(--font-smaller);
-				color: var(--text-muted);
-				display: flex;
-				gap: var(--size-2-2);
+		container: book-details-list / inline-size;
+		@container book-details-list (width < 600px) {
+			.book-details {
+				flex-direction: column;
 				align-items: center;
-				flex-wrap: wrap;
+
+				img {
+					max-height: 30rem;
+					max-width: 100%;
+				}
 			}
 		}
 	}
diff --git a/src/ui/styles/_breakpoints.scss b/src/ui/styles/_breakpoints.scss
new file mode 100644
index 0000000..305bfa4
--- /dev/null
+++ b/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;
+	}
+}