Fixed release banner, improved album layout.

assets/components/album/album.vue

@@ -11,7 +11,7 @@
 				/>
 			</div>
 
-			<div class="album">
+			<div class="album-items">
 				<div
 					v-for="item in items"
 					:key="item.id"
@@ -63,14 +63,12 @@ export default {
 	left: 0;
 	background: var(--shadow-extreme);
 	z-index: 10;
-	overflow-y: auto;
 }
 
 .album-header {
 	display: flex;
 	justify-content: space-between;
 	flex-shrink: 0;
-	overflow: hidden;
 }
 
 .album-title {
@@ -78,7 +76,7 @@ export default {
 	flex-grow: 1;
 	align-items: center;
 	justify-content: center;
-	padding: 1rem;
+	padding: .5rem 1rem;
 	margin: 0;
 	color: var(--text-light);
 	white-space: nowrap;
@@ -87,8 +85,8 @@ export default {
 }
 
 .close {
-	width: 2rem;
-	height: 2rem;
+	width: 1.5rem;
+	height: 1.5rem;
 	padding: 1rem;
 	fill: var(--lighten);
 
@@ -98,14 +96,15 @@ export default {
 	}
 }
 
-.album {
+.album-items {
 	display: grid;
 	flex-grow: 1;
 	align-items: center;
 	justify-content: center;
-	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
-	grid-gap: 1rem;
+	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
+	grid-gap: 0 1rem;
 	padding: 1rem;
+	overflow-y: auto;
 }
 
 .item-container {
@@ -114,13 +113,24 @@ export default {
 	justify-content: center;
 }
 
+.item-link {
+	height: 100%;
+}
+
 .item {
-	height: 15rem;
+	width: 100%;
+	margin: 0 0 1rem 0;
 }
 
 @media(max-width: $breakpoint) {
-	.album {
+	.album-items {
 		grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
 	}
 }
+
+@media(max-width: $breakpoint-nano) {
+	.album-items {
+		grid-template-columns: repeat(auto-fill, 1fr);
+	}
+}
 </style>