diff --git a/package-lock.json b/package-lock.json index 53a92c03..246a0d6b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "psysonic", - "version": "1.34.11-dev", + "version": "1.34.11", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "psysonic", - "version": "1.34.11-dev", + "version": "1.34.11", "dependencies": { "@fontsource-variable/dm-sans": "^5.2.8", "@fontsource-variable/figtree": "^5.2.10", diff --git a/src/components/AlbumTrackList.tsx b/src/components/AlbumTrackList.tsx index 64083347..3205493f 100644 --- a/src/components/AlbumTrackList.tsx +++ b/src/components/AlbumTrackList.tsx @@ -532,6 +532,41 @@ export default function AlbumTrackList({ } return ( + <> + {/* Column visibility picker - fuera del tracklist para evitar overflow cutoff */} +
+
+ + {pickerOpen && ( +
+
{t('albumDetail.columns')}
+ {COLUMNS.filter(c => !c.required).map(c => { + const label = c.i18nKey ? t(`albumDetail.${c.i18nKey as string}`) : c.key; + const isOn = colVisible.has(c.key); + return ( + + ); + })} +
+ )} +
+
+
+
{visibleCols.map((colDef, colIndex) => renderHeaderCell(colDef, colIndex))}
- - {/* Column visibility picker */} -
- - {pickerOpen && ( -
-
{t('albumDetail.columns')}
- {COLUMNS.filter(c => !c.required).map(c => { - const label = c.i18nKey ? t(`albumDetail.${c.i18nKey as string}`) : c.key; - const isOn = colVisible.has(c.key); - return ( - - ); - })} -
- )} -
{/* ── Tracks ── */} @@ -649,5 +652,6 @@ export default function AlbumTrackList({ ))}
+ ); } diff --git a/src/styles/components.css b/src/styles/components.css index 72bebb9d..b3461e19 100644 --- a/src/styles/components.css +++ b/src/styles/components.css @@ -921,6 +921,7 @@ display: flex; flex-direction: column; gap: 0; + position: relative; /* Para que el picker posicionado absoluto funcione */ } .album-detail-header { @@ -1396,7 +1397,13 @@ /* ─ Tracklist ─ */ .tracklist { padding: 0 var(--space-6) var(--space-6); - overflow-x: auto; + /* El scroll horizontal ahora es natural de la página, no confinado al tracklist */ + overflow-x: visible; +} + +/* Wrapper para el header con position relative para el picker */ +.tracklist-header-wrapper { + position: relative; } .col-center { @@ -1490,14 +1497,19 @@ } /* ── Column visibility picker ── */ +/* Wrapper fuera del tracklist - alineado a la derecha del álbum */ +.tracklist-col-picker-wrapper { + display: flex; + justify-content: flex-end; + padding: 0 var(--space-6); + margin-bottom: 4px; + z-index: 50; +} + .tracklist-col-picker { - position: absolute; - top: 0; - right: 0; - height: 100%; + position: relative; display: flex; align-items: center; - padding-right: 4px; } .tracklist-col-picker-btn {