From ac966d98a9a33c68999e03ad57b2c726b57998db Mon Sep 17 00:00:00 2001 From: Deluan Date: Mon, 2 Jun 2025 12:26:01 -0400 Subject: [PATCH] fix(ui): improve layout and responsiveness of SelectPlaylistInput component Signed-off-by: Deluan --- ui/src/dialogs/SelectPlaylistInput.jsx | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/ui/src/dialogs/SelectPlaylistInput.jsx b/ui/src/dialogs/SelectPlaylistInput.jsx index 0365e599..0e063692 100644 --- a/ui/src/dialogs/SelectPlaylistInput.jsx +++ b/ui/src/dialogs/SelectPlaylistInput.jsx @@ -20,13 +20,20 @@ import { isWritable } from '../common' import { makeStyles } from '@material-ui/core' const useStyles = makeStyles((theme) => ({ - root: { width: '100%' }, + root: { + width: '100%', + height: '100%', + display: 'flex', + flexDirection: 'column', + }, searchField: { marginBottom: theme.spacing(2), width: '100%', + flexShrink: 0, }, playlistList: { - maxHeight: 200, + flex: 1, + minHeight: 0, overflow: 'auto', border: `1px solid ${theme.palette.divider}`, borderRadius: theme.shape.borderRadius, @@ -42,6 +49,9 @@ const useStyles = makeStyles((theme) => ({ }, selectedPlaylistsContainer: { marginTop: theme.spacing(2), + flexShrink: 0, + maxHeight: '30%', + overflow: 'auto', }, selectedPlaylist: { display: 'inline-flex',