diff --git a/.devcontainer/Dockerfile b/.devcontainer/Dockerfile
index 7750aa2..588d8ec 100644
--- a/.devcontainer/Dockerfile
+++ b/.devcontainer/Dockerfile
@@ -22,7 +22,9 @@ RUN apt-get update && apt-get upgrade -y && \
         xz-utils \
         libatomic1 \
         libc6 \
-        wget && \
+        wget \
+        nodejs \
+        npm && \
     rm -rf /var/lib/apt/lists/*
 
 # ------------------------------------------------------------
diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
index 6a08a95..3aee656 100644
--- a/.devcontainer/devcontainer.json
+++ b/.devcontainer/devcontainer.json
@@ -1,5 +1,5 @@
 {
-    "name": "debian-bun-fish-devcontainer",
+    "name": "debian-npm-fish-devcontainer",
     "build": {
         "dockerfile": "Dockerfile"
     },
@@ -14,7 +14,7 @@
         }
     },
 
-    "postCreateCommand": "bun install",
+    "postCreateCommand": "npm install",
 
     "remoteEnv": {
         "SHELL": "/usr/bin/fish"
diff --git a/js/app.js b/js/app.js
index a41e476..05cc42d 100644
--- a/js/app.js
+++ b/js/app.js
@@ -560,7 +560,12 @@ document.addEventListener('DOMContentLoaded', async () => {
         }
     });
 
-    document.getElementById('fullscreen-cover-image')?.addEventListener('click', () => {
+    document.getElementById('fullscreen-cover-overlay')?.addEventListener('click', (e) => {
+        const coverImage = document.getElementById('fullscreen-cover-image');
+        if (!coverImage) return;
+        const isOnCoverImage = e.target.closest('#fullscreen-cover-image') || e.target.id === 'fullscreen-cover-image';
+        if (!isOnCoverImage) return;
+
         const action = fullscreenCoverClickSettings.getAction();
         const overlay = document.getElementById('fullscreen-cover-overlay');
         const playerInstance = window.monochromePlayer;
diff --git a/js/ui.js b/js/ui.js
index f63957e..8fb1cdd 100644
--- a/js/ui.js
+++ b/js/ui.js
@@ -1767,11 +1767,13 @@ export class UIRenderer {
                 genresSection.innerHTML = `<h2 class="section-title">Genres</h2>`;
 
                 const genresGrid = document.createElement('div');
-                genresGrid.className = 'card-grid';
+                genresGrid.style.display = 'flex';
+                genresGrid.style.flexWrap = 'wrap';
+                genresGrid.style.gap = '0.5rem';
                 genresGrid.innerHTML = GENRES.map(
                     (genre) => `
-                    <div class="card genre-card" data-genre-id="${genre.id}" data-genre-name="${escapeHtml(genre.name)}" style="cursor: pointer; background: var(--secondary); padding: 1.5rem; display: flex; align-items: center; justify-content: center; text-align: center; min-height: 100px; border-radius: var(--radius); border: 1px solid var(--border);">
-                        <h3 style="margin: 0; font-size: 1.1rem; font-weight: 600;">${escapeHtml(genre.name)}</h3>
+                    <div class="card genre-card" data-genre-id="${genre.id}" data-genre-name="${escapeHtml(genre.name)}" style="cursor: pointer; background: var(--secondary); padding: 0.6rem 1rem; border-radius: var(--radius); border: 1px solid var(--border);">
+                        <h3 style="margin: 0; font-size: 0.875rem; font-weight: 600;">${escapeHtml(genre.name)}</h3>
                     </div>
                 `
                 ).join('');