From bd43ea52402e0b0ac0b01c8e6dd39b12093b7562 Mon Sep 17 00:00:00 2001
From: Psychotoxical <171614930+Psychotoxical@users.noreply.github.com>
Date: Mon, 22 Jun 2026 03:05:38 +0200
Subject: [PATCH] fix(playlists): wrap header action buttons instead of
 overflowing (#1153)

* fix(playlists): wrap header action buttons instead of overflowing

The Playlists header action row was a fixed flex row, so at narrow
widths (e.g. with the queue panel open) the buttons overflowed and
were clipped off-screen. Add flex-wrap so they wrap, left-aligned,
matching the Albums toolbar behaviour.

* docs(changelog): add 1.49.0 entry for Playlists header button wrap (#1153)
---
 CHANGELOG.md                                 | 6 ++++++
 src/components/playlists/PlaylistsHeader.tsx | 2 +-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6db3da5a..34ca7f72 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -91,6 +91,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Fixed
 
+### Playlists header buttons clipped at narrow widths
+
+**By [@Psychotoxical](https://github.com/Psychotoxical), PR [#1153](https://github.com/Psychotoxical/psysonic/pull/1153)**
+
+* The action buttons at the top of the Playlists page (New Playlist, New Smart Playlist, folder controls, Select) could run off-screen and get cut off when the window was narrow or the queue panel was open. They now wrap onto multiple rows, left-aligned.
+
 ### Seeking in streamed Opus/Ogg tracks
 
 **By [@cucadmuh](https://github.com/cucadmuh), PR [#1110](https://github.com/Psychotoxical/psysonic/pull/1110)**
diff --git a/src/components/playlists/PlaylistsHeader.tsx b/src/components/playlists/PlaylistsHeader.tsx
index 30c99a64..b3bdbe8c 100644
--- a/src/components/playlists/PlaylistsHeader.tsx
+++ b/src/components/playlists/PlaylistsHeader.tsx
@@ -48,7 +48,7 @@ export default function PlaylistsHeader({
           ? t('playlists.selectionCount', { count: selectedIds.size })
           : t('playlists.title')}
       </h1>
-      <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}>
+      <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'center', flexWrap: 'wrap', justifyContent: 'flex-start' }}>
         {policy.canEditPlaylist && !(selectionMode && selectedIds.size > 0) && (<>
             {creating ? (
               <>