Redesign enhanced search results: modern flat layout with responsive cards

- Search bar: stripped heavy purple chrome, minimal dark input style
- Dropdown: inline flow instead of overlay, hides page header when active
- Section labels: flat uppercase text, no bordered glass boxes
- Artist cards: full-bleed photo with gradient overlay and name at bottom
  (matches library page style), flexbox wrap layout with fixed dimensions
- Album cards: discover-style dark cards in horizontal scroll on desktop,
  wrap to 2-per-row on mobile
- Track rows: clean flat list, subtle hover, smaller cover art
- Source tabs: compact pills with per-source accent colors
- Renamed grid classes (enh-artists-grid, enh-albums-grid, enh-tracks-list)
  to avoid collision with generic .artists-grid rule
- Mobile: downloads-main-panel min-width:0 fix for 1190px overflow,
  cards use calc(50% - 8px) for 2-per-row fill, touch-friendly targets

webui/static/mobile.css

@@ -129,7 +129,8 @@
     }
 
     .enh-compact-item.artist-card {
-        width: 45%;
+        width: calc(50% - 8px);
+        height: 200px;
     }
 
     .sidebar-header {
@@ -287,7 +288,14 @@
     .downloads-content {
         grid-template-columns: 1fr;
         height: auto;
-        padding: 0 16px 16px 16px;
+        padding: 0 12px 16px 12px;
+        overflow: hidden;
+    }
+
+    .downloads-main-panel {
+        min-width: 0;
+        max-width: 100%;
+        overflow: hidden;
     }
 
     .downloads-side-panel {
@@ -312,8 +320,8 @@
 
     .enhanced-search-bar-container {
         flex-direction: column;
-        gap: 12px;
-        padding: 16px;
+        gap: 8px;
+        padding: 8px;
     }
 
     .enhanced-search-wrapper {
@@ -343,16 +351,12 @@
     }
 
     .enhanced-dropdown {
-        position: fixed;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        margin-top: 0;
+        position: relative;
+        margin-top: 12px;
         border-radius: 0;
-        z-index: 10003;
-        overflow-y: auto;
-        max-height: 100vh;
+        z-index: 1;
+        overflow: visible;
+        max-height: none;
     }
 
     .search-mode-btn {
@@ -360,7 +364,34 @@
     }
 
     .enh-artists-wrapper {
-        grid-template-columns: 1fr;
+        flex-direction: column;
+        gap: 16px;
+    }
+
+    /* Artist cards — center and wrap */
+    .enh-compact-list.enh-artists-grid {
+        justify-content: center;
+    }
+
+    /* Album cards — wrap and fill space, 2 per row */
+    .enh-compact-list.enh-albums-grid {
+        flex-wrap: wrap;
+        justify-content: center;
+        gap: 10px;
+        overflow-x: hidden;
+    }
+
+    .enh-compact-item.album-card {
+        width: calc(50% - 8px);
+        flex-shrink: 0;
+    }
+
+    .enh-compact-item.album-card .enh-item-name {
+        font-size: 12px;
+    }
+
+    .enh-compact-item.album-card .enh-item-meta {
+        font-size: 11px;
     }
 
     /* --- Enhanced Search Results --- */
@@ -477,38 +508,67 @@
     }
 
     /* Enhanced search artist/album grids */
-    .enh-compact-list.artists-grid {
-        gap: 12px;
-        justify-content: center;
+    /* Enhanced search — tablet/mobile responsive */
+    .enh-compact-list.enh-artists-grid {
+        gap: 10px;
     }
 
     .enh-compact-item.artist-card {
-        padding: 16px 12px;
+        width: calc(50% - 8px);
+        height: 200px;
     }
 
-    .enh-item-image.artist-image {
-        width: 120px;
-        height: 120px;
+    .enh-compact-item.artist-card .enh-item-info {
+        padding: 10px;
     }
 
-    .enh-item-image-placeholder.artist-placeholder {
-        width: 120px;
-        height: 120px;
-        font-size: 48px;
+    .enh-compact-item.artist-card .enh-item-name {
+        font-size: 13px;
     }
 
-    .enh-compact-item.artist-card .enh-item-info {
-        min-width: 120px;
-        max-width: 160px;
+    /* Track items — larger touch targets */
+    .enh-compact-item.track-item {
+        padding: 10px 12px;
+        min-height: 56px;
     }
 
-    .enh-compact-list.albums-grid {
-        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
-        gap: 12px;
+    .enh-item-image.track-cover,
+    .enh-item-image-placeholder.track-placeholder {
+        width: 44px;
+        height: 44px;
     }
 
-    .enh-compact-item.album-card {
-        padding: 14px 12px;
+    /* Always show play button on touch devices */
+    .enh-item-play-btn {
+        opacity: 1 !important;
+        transform: translateY(-50%) !important;
+        position: static !important;
+        transform: none !important;
+        padding: 6px 10px;
+        flex-shrink: 0;
+    }
+
+    .enh-item-duration {
+        font-size: 12px;
+        gap: 8px;
+    }
+
+    /* Source tabs — horizontal scroll on small screens */
+    .enh-source-tabs {
+        overflow-x: auto;
+        flex-wrap: nowrap;
+        -webkit-overflow-scrolling: touch;
+        scrollbar-width: none;
+        padding-bottom: 4px;
+    }
+    .enh-source-tabs::-webkit-scrollbar {
+        display: none;
+    }
+
+    .enh-source-tab {
+        flex-shrink: 0;
+        min-height: 36px;
+        padding: 8px 14px;
     }
 
     /* --- Phase 4: Sync --- */
@@ -1896,28 +1956,60 @@
         font-size: 14px;
     }
 
-    /* Enhanced search - smaller artist cards */
-    .enh-item-image.artist-image {
-        width: 100px;
-        height: 100px;
+    /* Enhanced search - smaller cards on small screens */
+    /* Enhanced search — small phone */
+    .enh-compact-list.enh-artists-grid {
+        gap: 8px;
     }
 
-    .enh-item-image-placeholder.artist-placeholder {
-        width: 100px;
-        height: 100px;
-        font-size: 40px;
+    .enh-compact-item.artist-card {
+        width: calc(50% - 6px);
+        height: 170px;
     }
 
     .enh-compact-item.artist-card .enh-item-info {
-        min-width: 100px;
-        max-width: 140px;
+        padding: 8px;
     }
 
-    .enh-compact-list.albums-grid {
-        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
+    .enh-compact-item.artist-card .enh-item-name {
+        font-size: 11px;
+    }
+
+    .enh-compact-item.album-card {
+        width: calc(50% - 6px);
+    }
+
+    .enh-compact-item.album-card .enh-item-name {
+        font-size: 11px;
+    }
+
+    .enh-compact-item.album-card .enh-item-info {
+        padding: 8px 10px 10px;
+    }
+
+    .enh-compact-item.track-item {
+        padding: 10px 8px;
         gap: 10px;
     }
 
+    .enh-compact-item.track-item .enh-item-name {
+        font-size: 13px;
+    }
+
+    .enh-compact-item.track-item .enh-item-meta {
+        font-size: 11px;
+    }
+
+    .enh-item-image.track-cover,
+    .enh-item-image-placeholder.track-placeholder {
+        width: 38px;
+        height: 38px;
+    }
+
+    .enh-section-title {
+        font-size: 11px;
+    }
+
     /* Beatport tighter */
     .beatport-tab-button {
         flex: 0 0 100%;

webui/static/script.js

@@ -8019,11 +8019,11 @@ function initializeSearchModeToggle() {
 
         // Add appropriate grid class to list
         if (isArtist) {
-            list.classList.add('artists-grid');
+            list.classList.add('enh-artists-grid');
         } else if (isAlbum) {
-            list.classList.add('albums-grid');
+            list.classList.add('enh-albums-grid');
         } else if (isTrack) {
-            list.classList.add('tracks-list');
+            list.classList.add('enh-tracks-list');
         }
 
         items.forEach(item => {
@@ -8505,6 +8505,13 @@ function initializeSearchModeToggle() {
             dropdown.classList.remove('hidden');
             updateToggleButtonState();
         }
+        // Hide the page header + search mode toggle to reclaim space
+        const header = document.querySelector('#downloads-page .downloads-header');
+        const modeToggle = document.querySelector('.search-mode-toggle-container');
+        const slskdPlaceholder = document.querySelector('#enhanced-search-section .search-results-container');
+        if (header) header.classList.add('enh-results-active-hide');
+        if (modeToggle) modeToggle.classList.add('enh-results-active-hide');
+        if (slskdPlaceholder) slskdPlaceholder.classList.add('enh-results-active-hide');
     }
 
     function hideDropdown() {
@@ -8513,6 +8520,13 @@ function initializeSearchModeToggle() {
             dropdown.classList.add('hidden');
             updateToggleButtonState();
         }
+        // Restore hidden elements
+        const header = document.querySelector('#downloads-page .downloads-header');
+        const modeToggle = document.querySelector('.search-mode-toggle-container');
+        const slskdPlaceholder = document.querySelector('#enhanced-search-section .search-results-container');
+        if (header) header.classList.remove('enh-results-active-hide');
+        if (modeToggle) modeToggle.classList.remove('enh-results-active-hide');
+        if (slskdPlaceholder) slskdPlaceholder.classList.remove('enh-results-active-hide');
     }
 
     function updateToggleButtonState() {