feat(mobile): comprehensive mobile UI overhaul (#238)

RandomMix: filters and genre mix panels collapse on mobile
- RandomAlbums / album grids: auto-fill favouring 3 columns at narrow widths
- BottomNav: More button opens a bottom sheet with remaining nav items
- MobileMoreOverlay: new sheet component with backdrop and slide-up animation
- Tracklist: mobile Title / Artist two-line stacked layout (Apple Music style)
- ArtistDetail: centred header (photo → name → buttons), icon-only buttons
  except Play All, collapsible Similar Artists (5 default), 2-column album
  grid, avatar glow derived from dominant cover colour
- Settings: fixed overflow in ReplayGain, Crossfade, mix rating filters,
  theme scheduler, and Next Track Buffering sections

Co-authored-by: kilyabin <65072190+kilyabin@users.noreply.github.com>

src/components/BottomNav.tsx

@@ -1,9 +1,10 @@
 import { useState } from 'react';
 import { NavLink } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import { Disc3, Search, Music4, AudioLines } from 'lucide-react';
+import { Disc3, Search, Music4, AudioLines, MoreHorizontal } from 'lucide-react';
 import { usePlayerStore } from '../store/playerStore';
 import MobileSearchOverlay from './MobileSearchOverlay';
+import MobileMoreOverlay from './MobileMoreOverlay';
 
 const NAV_ITEMS = [
   { to: '/',            end: true,  icon: Disc3,      labelKey: 'sidebar.mainstage' },
@@ -16,6 +17,7 @@ export default function BottomNav() {
   const isPlaying    = usePlayerStore(s => s.isPlaying);
   const currentTrack = usePlayerStore(s => s.currentTrack);
   const [searchOpen, setSearchOpen] = useState(false);
+  const [moreOpen, setMoreOpen] = useState(false);
 
   return (
     <>
@@ -47,9 +49,21 @@ export default function BottomNav() {
           </span>
           <span className="bottom-nav-label">{t('search.title')}</span>
         </button>
+
+        <button
+          className={`bottom-nav-item${moreOpen ? ' active' : ''}`}
+          onClick={() => setMoreOpen(v => !v)}
+          aria-label={t('sidebar.more')}
+        >
+          <span className="bottom-nav-icon-wrap">
+            <MoreHorizontal size={22} />
+          </span>
+          <span className="bottom-nav-label">{t('sidebar.more')}</span>
+        </button>
       </nav>
 
       {searchOpen && <MobileSearchOverlay onClose={() => setSearchOpen(false)} />}
+      {moreOpen && <MobileMoreOverlay onClose={() => setMoreOpen(false)} />}
     </>
   );
 }

src/components/MobileMoreOverlay.tsx

@@ -0,0 +1,73 @@
+import { createPortal } from 'react-dom';
+import { NavLink } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { Settings, HardDriveDownload } from 'lucide-react';
+import { useSidebarStore } from '../store/sidebarStore';
+import { useAuthStore } from '../store/authStore';
+import { useOfflineStore } from '../store/offlineStore';
+import { ALL_NAV_ITEMS } from '../config/navItems';
+
+const BOTTOM_NAV_ROUTES = new Set(['/', '/albums', '/now-playing']);
+
+export default function MobileMoreOverlay({ onClose }: { onClose: () => void }) {
+  const { t } = useTranslation();
+  const sidebarItems = useSidebarStore(s => s.items);
+  const randomNavMode = useAuthStore(s => s.randomNavMode);
+  const serverId = useAuthStore(s => s.activeServerId ?? '');
+  const offlineAlbums = useOfflineStore(s => s.albums);
+  const hasOfflineContent = Object.values(offlineAlbums).some(a => a.serverId === serverId);
+
+  const items = sidebarItems
+    .filter(cfg => {
+      if (!cfg?.visible) return false;
+      const item = ALL_NAV_ITEMS[cfg.id];
+      if (!item) return false;
+      if (BOTTOM_NAV_ROUTES.has(item.to)) return false;
+      if (randomNavMode === 'hub' && (cfg.id === 'randomMix' || cfg.id === 'randomAlbums')) return false;
+      if (randomNavMode === 'separate' && cfg.id === 'randomPicker') return false;
+      return true;
+    })
+    .map(cfg => ALL_NAV_ITEMS[cfg.id]);
+
+  return createPortal(
+    <>
+      <div className="mobile-more-backdrop" onClick={onClose} />
+      <div className="mobile-more-sheet">
+        <div className="mobile-more-handle" />
+        <div className="mobile-more-grid">
+          {items.map(item => (
+            <NavLink
+              key={item.to}
+              to={item.to}
+              end={item.to === '/'}
+              className={({ isActive }) => `mobile-more-item${isActive ? ' active' : ''}`}
+              onClick={onClose}
+            >
+              <span className="mobile-more-icon"><item.icon size={24} /></span>
+              <span className="mobile-more-label">{t(item.labelKey)}</span>
+            </NavLink>
+          ))}
+          {hasOfflineContent && (
+            <NavLink
+              to="/offline"
+              className={({ isActive }) => `mobile-more-item${isActive ? ' active' : ''}`}
+              onClick={onClose}
+            >
+              <span className="mobile-more-icon"><HardDriveDownload size={24} /></span>
+              <span className="mobile-more-label">{t('sidebar.offlineLibrary')}</span>
+            </NavLink>
+          )}
+          <NavLink
+            to="/settings"
+            className={({ isActive }) => `mobile-more-item${isActive ? ' active' : ''}`}
+            onClick={onClose}
+          >
+            <span className="mobile-more-icon"><Settings size={24} /></span>
+            <span className="mobile-more-label">{t('sidebar.settings')}</span>
+          </NavLink>
+        </div>
+      </div>
+    </>,
+    document.body
+  );
+}

src/locales/de.ts

@@ -30,6 +30,7 @@ export const deTranslation = {
     allLibraries: 'Alle Bibliotheken',
     expandPlaylists: 'Playlists ausklappen',
     collapsePlaylists: 'Playlists einklappen',
+    more: 'Mehr',
   },
   home: {
     hero: 'Featured',

src/locales/en.ts

@@ -31,6 +31,7 @@ export const enTranslation = {
     allLibraries: 'All libraries',
     expandPlaylists: 'Expand playlists',
     collapsePlaylists: 'Collapse playlists',
+    more: 'More',
   },
   home: {
     hero: 'Featured',

src/locales/es.ts

@@ -31,6 +31,7 @@ export const esTranslation = {
     allLibraries: 'Todas las bibliotecas',
     expandPlaylists: 'Expandir listas',
     collapsePlaylists: 'Colapsar listas',
+    more: 'Más',
   },
   home: {
     hero: 'Destacado',

src/locales/fr.ts

@@ -30,6 +30,7 @@ export const frTranslation = {
     allLibraries: 'Toutes les bibliothèques',
     expandPlaylists: 'Développer les playlists',
     collapsePlaylists: 'Réduire les playlists',
+    more: 'Plus',
   },
   home: {
     hero: 'En vedette',

src/locales/nb.ts

@@ -30,6 +30,7 @@ export const nbTranslation = {
     allLibraries: 'Alle biblioteker',
     expandPlaylists: 'Utvid spillelister',
     collapsePlaylists: 'Skjul spillelister',
+    more: 'Mer',
   },
   home: {
     hero: 'Utvalgt',

src/locales/nl.ts

@@ -30,6 +30,7 @@ export const nlTranslation = {
     allLibraries: 'Alle bibliotheken',
     expandPlaylists: 'Afspeellijsten uitklappen',
     collapsePlaylists: 'Afspeellijsten inklappen',
+    more: 'Meer',
   },
   home: {
     hero: 'Uitgelicht',

src/locales/ru.ts

@@ -31,6 +31,7 @@ export const ruTranslation = {
     allLibraries: 'Все библиотеки',
     expandPlaylists: 'Развернуть плейлисты',
     collapsePlaylists: 'Свернуть плейлисты',
+    more: 'Ещё',
   },
   home: {
     hero: 'Подборка',

src/locales/zh.ts

@@ -30,6 +30,7 @@ export const zhTranslation = {
     allLibraries: '所有资料库',
     expandPlaylists: '展开播放列表',
     collapsePlaylists: '收起播放列表',
+    more: '更多',
   },
   home: {
     hero: '精选',

src/pages/ArtistDetail.tsx

@@ -4,7 +4,8 @@ import { getArtist, getArtistInfo, getTopSongs, getSimilarSongs2, getAlbum, sear
 import AlbumCard from '../components/AlbumCard';
 import CachedImage from '../components/CachedImage';
 import CoverLightbox from '../components/CoverLightbox';
-import { ArrowLeft, Users, ExternalLink, Heart, Play, Shuffle, Radio, HardDriveDownload, Check, Camera, Loader2 } from 'lucide-react';
+import { ArrowLeft, Users, ExternalLink, Heart, Play, Shuffle, Radio, HardDriveDownload, Check, Camera, Loader2, ChevronDown, ChevronUp } from 'lucide-react';
+import { useIsMobile } from '../hooks/useIsMobile';
 import { open } from '@tauri-apps/plugin-shell';
 import { usePlayerStore, songToTrack } from '../store/playerStore';
 import { useOfflineStore } from '../store/offlineStore';
@@ -15,6 +16,7 @@ import { lastfmGetSimilarArtists, lastfmIsConfigured } from '../api/lastfm';
 import LastfmIcon from '../components/LastfmIcon';
 import { invalidateCoverArt } from '../utils/imageCache';
 import { showToast } from '../utils/toast';
+import { extractCoverColors } from '../utils/dynamicColors';
 import StarRating from '../components/StarRating';
 
 function formatDuration(seconds: number): string {
@@ -62,7 +64,10 @@ export default function ArtistDetail() {
   const [lightboxOpen, setLightboxOpen] = useState(false);
   const [bioExpanded, setBioExpanded] = useState(false);
   const [uploading, setUploading] = useState(false);
+  const [similarCollapsed, setSimilarCollapsed] = useState(true);
+  const isMobile = useIsMobile();
   const [coverRevision, setCoverRevision] = useState(0);
+  const [avatarGlow, setAvatarGlow] = useState('');
   const imageInputRef = useRef<HTMLInputElement>(null);
 
   const playTrack = usePlayerStore(state => state.playTrack);
@@ -91,6 +96,7 @@ export default function ArtistDetail() {
     setInfo(null);
     setTopSongs([]);
     setFeaturedAlbums([]);
+    setAvatarGlow('');
     getArtist(id).then(artistData => {
       if (cancelled) return;
       setArtist(artistData.artist);
@@ -449,7 +455,14 @@ export default function ArtistDetail() {
       )}
 
       <div className="artist-detail-header">
-        <div className="artist-detail-avatar" style={{ position: 'relative' }}>
+        <div
+          className="artist-detail-avatar"
+          style={{
+            position: 'relative',
+            boxShadow: avatarGlow ? `0 0 36px 8px ${avatarGlow.replace('rgb(', 'rgba(').replace(')', ', 0.55)')}` : undefined,
+            transition: 'box-shadow 0.6s ease',
+          }}
+        >
           {coverId ? (
             <button
               className="artist-detail-avatar-btn"
@@ -462,6 +475,7 @@ export default function ArtistDetail() {
                 cacheKey={coverArtCacheKey(coverId, 300)}
                 alt={artist.name}
                 style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+                onLoad={e => extractCoverColors(e.currentTarget.src).then(({ accent }) => { if (accent) setAvatarGlow(accent); })}
                 onError={e => { (e.currentTarget as HTMLImageElement).style.display = 'none'; }}
               />
             </button>
@@ -538,15 +552,25 @@ export default function ArtistDetail() {
                   {playAllLoading ? <div className="spinner" style={{ width: 16, height: 16, borderTopColor: 'currentColor' }} /> : <Play size={16} />}
                   {t('artistDetail.playAll')}
                 </button>
-                <button className="btn btn-surface" onClick={handleShuffle} disabled={playAllLoading}>
+                <button
+                  className="btn btn-surface"
+                  onClick={handleShuffle}
+                  disabled={playAllLoading}
+                  data-tooltip={isMobile ? t('artistDetail.shuffle') : undefined}
+                >
                   {playAllLoading ? <div className="spinner" style={{ width: 16, height: 16, borderTopColor: 'currentColor' }} /> : <Shuffle size={16} />}
-                  {t('artistDetail.shuffle')}
+                  {!isMobile && t('artistDetail.shuffle')}
                 </button>
               </>
             )}
-            <button className="btn btn-surface" onClick={handleStartRadio} disabled={radioLoading}>
+            <button
+              className="btn btn-surface"
+              onClick={handleStartRadio}
+              disabled={radioLoading}
+              data-tooltip={isMobile ? t('artistDetail.radio') : undefined}
+            >
               {radioLoading ? <div className="spinner" style={{ width: 16, height: 16, borderTopColor: 'currentColor' }} /> : <Radio size={16} />}
-              {radioLoading ? t('artistDetail.loading') : t('artistDetail.radio')}
+              {!isMobile && (radioLoading ? t('artistDetail.loading') : t('artistDetail.radio'))}
             </button>
             {albums.length > 0 && (() => {
               const progress = id ? bulkProgress[id] : undefined;
@@ -564,9 +588,9 @@ export default function ArtistDetail() {
                   {isDownloading
                     ? <div className="spinner" style={{ width: 16, height: 16, borderTopColor: 'currentColor' }} />
                     : isDone ? <Check size={16} /> : <HardDriveDownload size={16} />}
-                  {isDownloading
+                  {!isMobile && (isDownloading
                     ? t('artistDetail.offlineDownloading', { done: progress.done, total: progress.total })
-                    : isDone ? t('artistDetail.offlineCached') : t('artistDetail.cacheOffline')}
+                    : isDone ? t('artistDetail.offlineCached') : t('artistDetail.cacheOffline'))}
                 </button>
               );
             })()}
@@ -665,9 +689,20 @@ export default function ArtistDetail() {
 
       {showSimilarSection && (
         <>
-          <h2 className="section-title" style={{ marginTop: '2rem', marginBottom: '1rem' }}>
+          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: '2rem', marginBottom: '1rem' }}>
+            <h2 className="section-title" style={{ margin: 0 }}>
               {t('artistDetail.similarArtists')}
             </h2>
+            {isMobile && (() => {
+              const list = showAudiomuseSimilar ? serverSimilarArtists : similarArtists;
+              return list.length > 5 ? (
+                <button className="btn btn-ghost" style={{ fontSize: 12, padding: '2px 8px' }} onClick={() => setSimilarCollapsed(v => !v)}>
+                  {similarCollapsed ? <ChevronDown size={14} /> : <ChevronUp size={14} />}
+                  {similarCollapsed ? t('nowPlaying.readMore') : t('nowPlaying.showLess')}
+                </button>
+              ) : null;
+            })()}
+          </div>
           {showLastfmSimilar && similarLoading ? (
             <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', color: 'var(--text-muted)', fontSize: '0.875rem' }}>
               <div className="spinner" style={{ width: 16, height: 16, borderTopColor: 'currentColor' }} />
@@ -675,7 +710,9 @@ export default function ArtistDetail() {
             </div>
           ) : (
             <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem' }}>
-              {(showAudiomuseSimilar ? serverSimilarArtists : similarArtists).map(a => (
+              {(showAudiomuseSimilar ? serverSimilarArtists : similarArtists)
+                .slice(0, isMobile && similarCollapsed ? 5 : undefined)
+                .map(a => (
                   <button
                     key={a.id}
                     className="artist-ext-link"
@@ -695,7 +732,7 @@ export default function ArtistDetail() {
       </h2>
 
       {albums.length > 0 ? (
-        <div className="album-grid-wrap">
+        <div className="album-grid-wrap album-grid-wrap--artist">
           {albums.map(a => <AlbumCard key={a.id} album={a} />)}
         </div>
       ) : (
@@ -715,7 +752,7 @@ export default function ArtistDetail() {
               ))}
             </div>
           ) : (
-            <div className="album-grid-wrap" style={{ animation: 'fadeIn 0.3s ease' }}>
+            <div className="album-grid-wrap album-grid-wrap--artist" style={{ animation: 'fadeIn 0.3s ease' }}>
               {featuredAlbums.map(a => <AlbumCard key={a.id} album={a} />)}
             </div>
           )}

src/pages/RandomMix.tsx

@@ -5,6 +5,7 @@ import { useAuthStore } from '../store/authStore';
 import { Play, RefreshCw, ChevronDown, ChevronUp, Heart } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { useDragDrop } from '../contexts/DragDropContext';
+import { useIsMobile } from '../hooks/useIsMobile';
 import {
   fetchRandomMixSongsUntilFull,
   getMixMinRatingsConfigFromAuth,
@@ -38,6 +39,7 @@ export default function RandomMix() {
   const starredOverrides = usePlayerStore(s => s.starredOverrides);
   const setStarredOverride = usePlayerStore(s => s.setStarredOverride);
   const [contextMenuSongId, setContextMenuSongId] = useState<string | null>(null);
+  const isMobile = useIsMobile();
   const psyDrag = useDragDrop();
   const [starredSongs, setStarredSongs] = useState<Set<string>>(new Set());
   const {
@@ -68,6 +70,10 @@ export default function RandomMix() {
   const [blacklistOpen, setBlacklistOpen] = useState(false);
   const [newGenre, setNewGenre] = useState('');
 
+  // Mobile collapsible panels
+  const [filtersExpanded, setFiltersExpanded] = useState(false);
+  const [genreMixExpanded, setGenreMixExpanded] = useState(false);
+
   // Genre Mix state
   const [serverGenres, setServerGenres] = useState<SubsonicGenre[]>([]);
   const [allAvailableGenres, setAllAvailableGenres] = useState<string[]>([]);
@@ -217,7 +223,7 @@ export default function RandomMix() {
       {/* ── Filter + Genre Mix panel ─────────────────────────────── */}
       <div style={{
         display: 'grid',
-        gridTemplateColumns: '1fr 1fr',
+        gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr',
         gap: '1px',
         background: 'var(--border)',
         border: '1px solid var(--border)',
@@ -227,9 +233,22 @@ export default function RandomMix() {
       }}>
         {/* Left: Blacklist */}
         <div style={{ background: 'var(--bg-card)', padding: '1rem 1.25rem' }}>
+          {isMobile ? (
+            <button
+              className="btn btn-ghost"
+              style={{ width: '100%', justifyContent: 'space-between', fontSize: 12, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.06em', color: 'var(--text-muted)', padding: '0' }}
+              onClick={() => setFiltersExpanded(v => !v)}
+            >
+              {t('randomMix.filterPanelTitle')}
+              {filtersExpanded ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
+            </button>
+          ) : (
             <div style={{ fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.06em', color: 'var(--text-muted)', marginBottom: '0.5rem' }}>
               {t('randomMix.filterPanelTitle')}
             </div>
+          )}
+          {(!isMobile || filtersExpanded) && (
+            <div style={{ marginTop: isMobile ? '0.75rem' : 0 }}>
               <p style={{ fontSize: 12, color: 'var(--text-muted)', marginBottom: '0.75rem', lineHeight: 1.5 }}>
                 {t('randomMix.filterPanelDesc')}
               </p>
@@ -308,12 +327,27 @@ export default function RandomMix() {
                 </div>
               )}
             </div>
+          )}
+        </div>
 
         {/* Right: Genre Mix */}
         <div style={{ background: 'var(--bg-card)', padding: '1rem 1.25rem' }}>
+          {isMobile ? (
+            <button
+              className="btn btn-ghost"
+              style={{ width: '100%', justifyContent: 'space-between', fontSize: 12, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.06em', color: 'var(--text-muted)', padding: '0' }}
+              onClick={() => setGenreMixExpanded(v => !v)}
+            >
+              {t('randomMix.genreMixTitle')}
+              {genreMixExpanded ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
+            </button>
+          ) : (
             <div style={{ fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.06em', color: 'var(--text-muted)', marginBottom: '0.75rem' }}>
               {t('randomMix.genreMixTitle')}
             </div>
+          )}
+          {(!isMobile || genreMixExpanded) && (
+            <div style={{ marginTop: isMobile ? '0.75rem' : 0 }}>
               <p style={{ fontSize: 12, color: 'var(--text-muted)', marginBottom: '0.75rem' }}>{t('randomMix.genreMixDesc')}</p>
               <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.4rem', alignItems: 'center' }}>
                 {serverGenres.length === 0 ? (
@@ -356,6 +390,8 @@ export default function RandomMix() {
                 )}
               </div>
             </div>
+          )}
+        </div>
       </div>
 
       {/* Genre Mix tracklist (shown when a genre is selected) */}

src/pages/Settings.tsx

@@ -1317,29 +1317,29 @@ export default function Settings() {
               )}
               {auth.replayGainEnabled && (
                 <div style={{ paddingLeft: '1rem', marginTop: '0.75rem', display: 'flex', flexDirection: 'column', gap: '0.6rem' }}>
-                  <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
+                  <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', flexWrap: 'wrap' }}>
-                    <span style={{ fontSize: 13, color: 'var(--text-secondary)', minWidth: 160 }}>
+                    <span style={{ fontSize: 13, color: 'var(--text-secondary)', minWidth: 100 }}>
                       {t('settings.replayGainPreGain')}
                     </span>
                     <input
                       type="range" min={0} max={6} step={0.5}
                       value={auth.replayGainPreGainDb}
                       onChange={e => auth.setReplayGainPreGainDb(Number(e.target.value))}
-                      style={{ flex: 1, maxWidth: 160 }}
+                      style={{ flex: 1, minWidth: 80, maxWidth: 160 }}
                     />
                     <span style={{ fontSize: 12, color: 'var(--text-muted)', minWidth: 40, textAlign: 'right' }}>
                       {auth.replayGainPreGainDb > 0 ? `+${auth.replayGainPreGainDb}` : auth.replayGainPreGainDb} dB
                     </span>
                   </div>
-                  <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
+                  <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', flexWrap: 'wrap' }}>
-                    <span style={{ fontSize: 13, color: 'var(--text-secondary)', minWidth: 160 }}>
+                    <span style={{ fontSize: 13, color: 'var(--text-secondary)', minWidth: 100 }}>
                       {t('settings.replayGainFallback')}
                     </span>
                     <input
                       type="range" min={-6} max={0} step={0.5}
                       value={auth.replayGainFallbackDb}
                       onChange={e => auth.setReplayGainFallbackDb(Number(e.target.value))}
-                      style={{ flex: 1, maxWidth: 160 }}
+                      style={{ flex: 1, minWidth: 80, maxWidth: 160 }}
                     />
                     <span style={{ fontSize: 12, color: 'var(--text-muted)', minWidth: 40, textAlign: 'right' }}>
                       {auth.replayGainFallbackDb > 0 ? `+${auth.replayGainFallbackDb}` : auth.replayGainFallbackDb} dB
@@ -1367,7 +1367,7 @@ export default function Settings() {
                 </label>
               </div>
               {auth.crossfadeEnabled && !auth.gaplessEnabled && (
-                <div style={{ paddingLeft: '1rem', marginTop: '0.5rem', display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
+                <div style={{ paddingLeft: '1rem', marginTop: '0.5rem', display: 'flex', alignItems: 'center', gap: '0.75rem', flexWrap: 'wrap' }}>
                   <input
                     type="range"
                     min={0.1}
@@ -1375,7 +1375,7 @@ export default function Settings() {
                     step={0.1}
                     value={auth.crossfadeSecs}
                     onChange={e => auth.setCrossfadeSecs(parseFloat(e.target.value))}
-                    style={{ width: 120 }}
+                    style={{ flex: 1, minWidth: 80, maxWidth: 200 }}
                     id="crossfade-secs-slider"
                   />
                   <span style={{ fontSize: 13, color: 'var(--text-secondary)', minWidth: 36 }}>
@@ -1440,7 +1440,7 @@ export default function Settings() {
               </div>
               {auth.preloadMode !== 'off' && (
                 <>
-                  <div style={{ paddingLeft: '1rem', marginTop: '0.5rem', display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
+                  <div style={{ paddingLeft: '1rem', marginTop: '0.5rem', display: 'flex', alignItems: 'center', gap: '0.75rem', flexWrap: 'wrap' }}>
                     {(['balanced', 'early', 'custom'] as const).map(mode => (
                       <button
                         key={mode}
@@ -1453,13 +1453,13 @@ export default function Settings() {
                     ))}
                   </div>
                   {auth.preloadMode === 'custom' && (
-                    <div style={{ paddingLeft: '1rem', marginTop: '0.5rem', display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
+                    <div style={{ paddingLeft: '1rem', marginTop: '0.5rem', display: 'flex', alignItems: 'center', gap: '0.75rem', flexWrap: 'wrap' }}>
                       <input
                         type="range"
                         min={5} max={120} step={5}
                         value={auth.preloadCustomSeconds}
                         onChange={e => auth.setPreloadCustomSeconds(parseInt(e.target.value))}
-                        style={{ width: 120 }}
+                        style={{ flex: 1, minWidth: 80, maxWidth: 200 }}
                       />
                       <span style={{ fontSize: 13, color: 'var(--text-secondary)', minWidth: 36 }}>
                         {t('settings.preloadCustomSeconds', { n: auth.preloadCustomSeconds })}
@@ -1503,13 +1503,13 @@ export default function Settings() {
 
               {auth.hotCacheEnabled && (
                 <div style={{ marginTop: '1.25rem' }}>
-                  <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
+                  <div style={{ display: 'flex', gap: 8, alignItems: 'center', flexWrap: 'wrap' }}>
                     <input
                       className="input"
                       type="text"
                       readOnly
                       value={auth.hotCacheDownloadDir || t('settings.hotCacheDirDefault')}
-                      style={{ flex: 1, fontSize: 13, color: auth.hotCacheDownloadDir ? 'var(--text-primary)' : 'var(--text-muted)', cursor: 'default' }}
+                      style={{ flex: 1, minWidth: 0, fontSize: 13, color: auth.hotCacheDownloadDir ? 'var(--text-primary)' : 'var(--text-muted)', cursor: 'default' }}
                     />
                     {auth.hotCacheDownloadDir && (
                       <button
@@ -1552,15 +1552,15 @@ export default function Settings() {
                   <div>
                     <div style={{ fontWeight: 500, marginBottom: 6 }}>{t('settings.hotCacheMaxMb')}</div>
                     <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
-                      <input type="range" min={32} max={20000} step={32} value={snapHotCacheMb(auth.hotCacheMaxMb)} onChange={e => auth.setHotCacheMaxMb(parseInt(e.target.value, 10))} style={{ width: 140 }} id="hot-cache-max-mb-slider" />
+                      <input type="range" min={32} max={20000} step={32} value={snapHotCacheMb(auth.hotCacheMaxMb)} onChange={e => auth.setHotCacheMaxMb(parseInt(e.target.value, 10))} style={{ flex: 1, minWidth: 80, maxWidth: 200 }} id="hot-cache-max-mb-slider" />
-                      <span style={{ fontSize: 13, color: 'var(--text-secondary)', minWidth: 72 }}>{snapHotCacheMb(auth.hotCacheMaxMb)} MB</span>
+                      <span style={{ fontSize: 13, color: 'var(--text-secondary)', minWidth: 60 }}>{snapHotCacheMb(auth.hotCacheMaxMb)} MB</span>
                     </div>
                   </div>
                   <div style={{ marginTop: '0.75rem' }}>
                     <div style={{ fontWeight: 500, marginBottom: 6 }}>{t('settings.hotCacheDebounce')}</div>
                     <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
-                      <input type="range" min={0} max={600} step={1} value={Math.min(600, Math.max(0, auth.hotCacheDebounceSec))} onChange={e => auth.setHotCacheDebounceSec(parseInt(e.target.value, 10))} style={{ width: 140 }} id="hot-cache-debounce-slider" />
+                      <input type="range" min={0} max={600} step={1} value={Math.min(600, Math.max(0, auth.hotCacheDebounceSec))} onChange={e => auth.setHotCacheDebounceSec(parseInt(e.target.value, 10))} style={{ flex: 1, minWidth: 80, maxWidth: 200 }} id="hot-cache-debounce-slider" />
-                      <span style={{ fontSize: 13, color: 'var(--text-secondary)', minWidth: 100 }}>
+                      <span style={{ fontSize: 13, color: 'var(--text-secondary)', minWidth: 80 }}>
                         {Math.min(600, Math.max(0, auth.hotCacheDebounceSec)) === 0
                           ? t('settings.hotCacheDebounceImmediate')
                           : t('settings.hotCacheDebounceSeconds', { n: Math.min(600, Math.max(0, auth.hotCacheDebounceSec)) })}
@@ -1945,7 +1945,7 @@ export default function Settings() {
                   <div
                     style={{
                       display: 'grid',
-                      gridTemplateColumns: 'repeat(3, minmax(0, 1fr))',
+                      gridTemplateColumns: 'repeat(auto-fit, minmax(90px, 1fr))',
                       gap: '1rem 0.75rem',
                       alignItems: 'start',
                     }}
@@ -2199,7 +2199,7 @@ export default function Settings() {
                 const nightH = theme.timeNightStart.split(':')[0];
                 const nightM = theme.timeNightStart.split(':')[1];
                 return (
-                  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem', marginTop: '1rem' }}>
+                  <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(160px, 1fr))', gap: '1rem', marginTop: '1rem' }}>
                     <div className="form-group">
                       <label className="settings-label" style={{ marginBottom: 6 }}>{t('settings.themeSchedulerDayTheme')}</label>
                       <CustomSelect value={theme.themeDay} onChange={theme.setThemeDay} options={themeOptions} />

src/styles/components.css

@@ -6815,9 +6815,111 @@ html.no-compositing .fs-seekbar-played {
    MOBILE COMPONENT OVERRIDES  (< 800px)
    ═══════════════════════════════════════════════════════════════════════════ */
 
+/* ─── Tracklist — compact Title + Artist rows ─── */
+.app-shell[data-mobile] .tracklist-header {
+  display: none;
+}
+
+.app-shell[data-mobile] .track-row {
+  display: grid !important;
+  grid-template-columns: 44px 1fr 50px !important;
+  grid-template-rows: auto auto;
+  column-gap: 8px;
+  row-gap: 0;
+  min-height: 52px;
+  padding: 6px 0;
+}
+
+/* play button / number */
+.app-shell[data-mobile] .track-row > :nth-child(1) {
+  grid-column: 1;
+  grid-row: 1 / span 2;
+  align-self: center;
+}
+
+/* title cell */
+.app-shell[data-mobile] .track-row > :nth-child(2) {
+  grid-column: 2;
+  grid-row: 1;
+  align-self: end;
+  padding-bottom: 1px;
+}
+
+/* artist cell — shown as subtitle */
+.app-shell[data-mobile] .track-row > :nth-child(3) {
+  grid-column: 2;
+  grid-row: 2;
+  align-self: start;
+  overflow: hidden;
+}
+
+/* duration — last child, right column */
+.app-shell[data-mobile] .track-row > :last-child {
+  grid-column: 3;
+  grid-row: 1 / span 2;
+  align-self: center;
+  justify-self: end;
+  display: flex !important;
+}
+
+/* hide album, genre, star and any extra columns */
+.app-shell[data-mobile] .track-row > :nth-child(n+4):not(:last-child) {
+  display: none !important;
+}
+
+/* artist button/span as subtitle */
+.app-shell[data-mobile] .track-row .track-artist-cell .rm-artist-btn,
+.app-shell[data-mobile] .track-row .track-artist-cell .track-artist {
+  font-size: 12px !important;
+  color: var(--text-secondary) !important;
+  padding: 0 !important;
+  background: none !important;
+  border: none !important;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: block;
+  width: 100%;
+  text-align: left;
+  cursor: default;
+}
+
+/* ─── Artist Detail page ─── */
+.app-shell[data-mobile] .artist-detail-header {
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+
+.app-shell[data-mobile] .artist-detail-avatar {
+  width: 150px;
+  height: 150px;
+  flex-shrink: 0;
+}
+
+.app-shell[data-mobile] .artist-detail-meta {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  padding-top: 0;
+}
+
+.app-shell[data-mobile] .artist-detail-entity-rating {
+  justify-content: center;
+}
+
+.app-shell[data-mobile] .artist-detail-links {
+  justify-content: center;
+}
+
+.app-shell[data-mobile] .album-grid-wrap--artist {
+  grid-template-columns: repeat(2, 1fr);
+}
+
 /* ─── Album / Artist Grid — fewer columns ─── */
 .app-shell[data-mobile] .album-grid-wrap {
-  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(min(140px, 30%), 1fr));
   gap: var(--space-3);
 }
 

src/styles/layout.css

@@ -2066,6 +2066,93 @@ html[data-platform="windows"] .player-bar.floating {
   line-height: 1;
 }
 
+/* ─── Mobile More Sheet ─── */
+.mobile-more-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.45);
+  z-index: 200;
+}
+
+.mobile-more-sheet {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: var(--bg-app);
+  border-radius: 16px 16px 0 0;
+  border-top: 1px solid var(--border);
+  z-index: 201;
+  padding: 0.5rem 0.75rem calc(0.75rem + var(--bottom-nav-height, 62px));
+  animation: more-sheet-up 0.22s ease;
+}
+
+@keyframes more-sheet-up {
+  from { transform: translateY(100%); }
+  to   { transform: translateY(0); }
+}
+
+.mobile-more-handle {
+  width: 36px;
+  height: 4px;
+  background: var(--border);
+  border-radius: 2px;
+  margin: 0 auto 0.75rem;
+}
+
+.mobile-more-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 0.25rem 0;
+}
+
+.mobile-more-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.3rem;
+  padding: 0.65rem 0.25rem;
+  border-radius: var(--radius);
+  color: var(--text-secondary);
+  text-decoration: none;
+  font-size: 11px;
+  font-weight: 500;
+  cursor: pointer;
+  background: none;
+  border: none;
+  transition: color var(--transition-fast), background var(--transition-fast);
+}
+
+.mobile-more-item:hover {
+  color: var(--text-primary);
+  background: var(--bg-hover);
+}
+
+.mobile-more-item.active {
+  color: var(--accent);
+}
+
+.mobile-more-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0.75;
+}
+
+.mobile-more-item.active .mobile-more-icon,
+.mobile-more-item:hover .mobile-more-icon {
+  opacity: 1;
+}
+
+.mobile-more-label {
+  line-height: 1.2;
+  text-align: center;
+  max-width: 72px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 /* ─── Grid Overrides ─── */
 .app-shell[data-mobile] {
   grid-template-columns: 1fr;