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:
1 parent
c1e6bd1a92
commit
56c61499d9
1 file changed
+19
-30
@@ -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 {
|
||||||
|
|||||||
Reference in new issue
Block a user