fix: move track header outside virtualized container

- Header now outside .track-sections.virtualized (like LocalLibraryView)
- Use calc() height for virtualized section to give explicit dimensions
- Removes complex flex/absolute positioning that was breaking layout
This commit is contained in:
vicrodh committed 2026-01-29 12:05:46 -06:00
1 parent c1e6bd1a92
commit 56c61499d9
1 file changed
+19 -30
+19 -30
View File
@@ -1209,22 +1209,22 @@
? new Set(trackIndexTargets.keys()) ? new Set(trackIndexTargets.keys())
: new Set<string>()} : new Set<string>()}
<!-- Always use virtualization for tracks - handles any favorites size efficiently --> <!-- Track list header - outside virtualized container -->
<div class="track-sections virtualized"> <div class="track-list-header">
<!-- Track list header --> <div class="col-number">#</div>
<div class="track-list-header"> <div class="col-title">Title</div>
<div class="col-number">#</div> {#if !trackGroupingEnabled || trackGroupMode !== 'album'}
<div class="col-title">Title</div> <div class="col-album">Album</div>
{#if !trackGroupingEnabled || trackGroupMode !== 'album'} {/if}
<div class="col-album">Album</div> <div class="col-duration">Duration</div>
{/if} <div class="col-quality">Quality</div>
<div class="col-duration">Duration</div> <div class="col-icon"><Heart size={14} /></div>
<div class="col-quality">Quality</div> <div class="col-icon"><CloudDownload size={14} /></div>
<div class="col-icon"><Heart size={14} /></div> <div class="col-spacer"></div>
<div class="col-icon"><CloudDownload size={14} /></div> </div>
<div class="col-spacer"></div>
</div>
<!-- Virtualized track list -->
<div class="track-sections virtualized">
<div class="virtualized-container"> <div class="virtualized-container">
<VirtualizedTrackList <VirtualizedTrackList
groups={groupedTracks} groups={groupedTracks}
@@ -2016,26 +2016,16 @@
.track-sections.virtualized { .track-sections.virtualized {
flex: 1; flex: 1;
min-height: 0; height: calc(100vh - 380px);
display: flex; min-height: 400px;
flex-direction: column;
overflow: hidden; overflow: hidden;
} }
.virtualized-container { .virtualized-container {
flex: 1; flex: 1;
min-height: 0; height: 100%;
min-width: 0;
overflow: hidden; overflow: hidden;
position: relative;
}
/* Ensure VirtualizedTrackList fills its container */
.virtualized-container :global(.virtual-container) {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
} }
/* Track list header - matches PlaylistDetailView style */ /* Track list header - matches PlaylistDetailView style */
@@ -2054,7 +2044,6 @@
box-sizing: border-box; box-sizing: border-box;
border-bottom: 1px solid var(--bg-tertiary); border-bottom: 1px solid var(--bg-tertiary);
margin-bottom: 8px; margin-bottom: 8px;
flex-shrink: 0;
} }
.track-list-header .col-number { .track-list-header .col-number {