fix(favorites): full height layout and remove horizontal scrollbar
- Add no-outer-scroll class when sidepanel mode is active - Set up proper flex container hierarchy for full height: - .favorites-view becomes flex column container - .content gets flex: 1 with min-height: 0 - ViewTransition wrapper gets flex: 1 via :global selector - Fix negative margins to match parent padding (was -32px, now -8px/-18px) - Reduce artist column width to 240px (matches LocalLibrary) - Fix album column right padding to 8px
This commit is contained in:
1 parent
93baa9f47c
commit
efe0f7143b
1 file changed
+22
-5
@@ -1014,7 +1014,7 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<ViewTransition duration={200} distance={12} direction="down">
|
<ViewTransition duration={200} distance={12} direction="down">
|
||||||
<div class="favorites-view" class:no-outer-scroll={activeTab === 'tracks' && !loading && filteredTracks.length > 0} bind:this={scrollContainer}>
|
<div class="favorites-view" class:no-outer-scroll={(activeTab === 'tracks' && !loading && filteredTracks.length > 0) || (activeTab === 'artists' && artistViewMode === 'sidepanel')} bind:this={scrollContainer}>
|
||||||
<!-- Header -->
|
<!-- Header -->
|
||||||
<div class="header">
|
<div class="header">
|
||||||
<div
|
<div
|
||||||
@@ -1866,6 +1866,23 @@
|
|||||||
|
|
||||||
.favorites-view.no-outer-scroll {
|
.favorites-view.no-outer-scroll {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
padding-bottom: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.favorites-view.no-outer-scroll .content {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
min-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.favorites-view.no-outer-scroll .content > :global(.view-transition) {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
min-height: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
@@ -2700,19 +2717,19 @@
|
|||||||
gap: 0;
|
gap: 0;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
min-height: 0;
|
min-height: 0;
|
||||||
margin: 0 -32px; /* Negative margins to extend to edges */
|
margin: 0 -8px 0 -18px; /* Negative margins to extend to edges (match parent padding) */
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.artist-column {
|
.artist-column {
|
||||||
width: 280px;
|
width: 240px;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
border-right: 1px solid var(--bg-tertiary);
|
border-right: 1px solid var(--bg-tertiary);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
padding-left: 32px;
|
padding-left: 18px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.artist-column-header {
|
.artist-column-header {
|
||||||
@@ -2817,7 +2834,7 @@
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
padding: 0 32px 0 24px;
|
padding: 0 8px 0 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.artist-albums-header {
|
.artist-albums-header {
|
||||||
|
|||||||
Reference in new issue
Block a user