Improved mobile library pages

app/pages/library/albums.vue

@@ -64,4 +64,23 @@ useHead({ title: "Albums" })
 	opacity: 0.7;
 	margin: 0.75rem 0;
 }
+
+@media (max-width: 767px) {
+	.album-list {
+		display: grid;
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+		gap: 1rem;
+	}
+
+	.album-list :deep(.card) {
+		min-width: 0;
+		max-width: none;
+	}
+
+	.album-list :deep(.card img) {
+		display: block;
+		width: 100%;
+		height: auto;
+	}
+}
 </style>

app/pages/library/artists.vue

@@ -60,4 +60,22 @@ useHead({ title: "Artists" })
 	opacity: 0.7;
 	margin: 0.75rem 0;
 }
+
+@media (max-width: 767px) {
+	.artist-list {
+		display: grid;
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+		gap: 1rem;
+	}
+
+	.artist-list :deep(.card) {
+		min-width: 0;
+	}
+
+	.artist-list :deep(.card img) {
+		display: block;
+		width: 100%;
+		height: auto;
+	}
+}
 </style>

app/pages/library/songs.vue

@@ -54,6 +54,7 @@ useHead({ title: "Songs" })
 				:track="track"
 				:index="index"
 				:extended-info="true"
+				library-list
 				@play-album-at-index="() => playAlbumAtIndex(tracks, index)"
 				@remove-from-library="removeFromLibrary"
 			/>
@@ -97,4 +98,11 @@ useHead({ title: "Songs" })
 	opacity: 0.7;
 	margin: 0.75rem 0;
 }
+
+@media (max-width: 359px) {
+	.page-header {
+		flex-wrap: wrap;
+		justify-content: flex-start;
+	}
+}
 </style>