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:
vicrodh committed 2026-01-30 09:07:52 -06:00
1 parent 93baa9f47c
commit efe0f7143b
1 file changed
+22 -5
+22 -5
View File
@@ -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 {