Fix Android navigation and improve UI responsiveness

- Convert music category buttons from <button> to native <a> links for better Android compatibility
- Convert artist/album nested buttons in TrackList to <a> links to fix HTML validation issues
- Add event handlers with proper stopPropagation to maintain click behavior
- Increase library overview card sizes from medium to large (50% bigger)
- Increase thumbnail sizes in list view from 10x10 to 16x16
- Add console logging for debugging click events on mobile
- Remove preventDefault() handlers that were blocking Android touch events

These changes resolve navigation issues on Android devices where buttons weren't responding to taps. Native <a> links provide better cross-platform compatibility and allow SvelteKit to handle navigation more reliably.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

src/routes/library/+page.svelte

@@ -43,17 +43,21 @@
   });
 
   async function handleLibraryClick(lib: Library) {
-    // Route to dedicated music library page
-    if (lib.collectionType === "music") {
-      library.setCurrentLibrary(lib);
-      goto("/library/music");
-      return;
-    }
+    try {
+      // Route to dedicated music library page
+      if (lib.collectionType === "music") {
+        library.setCurrentLibrary(lib);
+        await goto("/library/music");
+        return;
+      }
 
-    // For other library types, load items normally
-    library.setCurrentLibrary(lib);
-    library.clearGenres();
-    await library.loadItems(lib.id);
+      // For other library types, load items normally
+      library.setCurrentLibrary(lib);
+      library.clearGenres();
+      await library.loadItems(lib.id);
+    } catch (error) {
+      console.error("Navigation error:", error);
+    }
   }
 
   async function handleGenreFilterChange() {
@@ -64,35 +68,39 @@
     }
   }
 
-  function handleItemClick(item: MediaItem | Library) {
-    if ("type" in item) {
-      // It's a MediaItem
-      const mediaItem = item as MediaItem;
-      switch (mediaItem.type) {
-        case "Series":
-        case "Movie":
-        case "MusicAlbum":
-        case "MusicArtist":
-        case "Folder":
-        case "CollectionFolder":
-        case "Playlist":
-        case "Channel":
-        case "ChannelFolderItem":
-          // Navigate to detail view
-          goto(`/library/${mediaItem.id}`);
-          break;
-        case "Episode":
-          // Episodes play directly
-          goto(`/player/${mediaItem.id}`);
-          break;
-        default:
-          // For other items, try detail page first
-          goto(`/library/${mediaItem.id}`);
-          break;
+  async function handleItemClick(item: MediaItem | Library) {
+    try {
+      if ("type" in item) {
+        // It's a MediaItem
+        const mediaItem = item as MediaItem;
+        switch (mediaItem.type) {
+          case "Series":
+          case "Movie":
+          case "MusicAlbum":
+          case "MusicArtist":
+          case "Folder":
+          case "CollectionFolder":
+          case "Playlist":
+          case "Channel":
+          case "ChannelFolderItem":
+            // Navigate to detail view
+            await goto(`/library/${mediaItem.id}`);
+            break;
+          case "Episode":
+            // Episodes play directly
+            await goto(`/player/${mediaItem.id}`);
+            break;
+          default:
+            // For other items, try detail page first
+            await goto(`/library/${mediaItem.id}`);
+            break;
+        }
+      } else {
+        // It's a Library
+        await handleLibraryClick(item as Library);
       }
-    } else {
-      // It's a Library
-      handleLibraryClick(item as Library);
+    } catch (error) {
+      console.error("Navigation error:", error);
     }
   }
 
@@ -180,11 +188,11 @@
           <p>No libraries found</p>
         </div>
       {:else}
-        <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
+        <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
           {#each $libraries as lib (lib.id)}
             <MediaCard
               item={lib}
-              size="medium"
+              size="large"
               onclick={() => handleLibraryClick(lib)}
             />
           {/each}