From 8d53358d33003ae249b4e11a4bfee182403a8456 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Tue, 2 Dec 2025 01:02:08 -0800
Subject: [PATCH] make query editor button easier to click

---
 .../playlist-detail-song-list-route.tsx       | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/renderer/features/playlists/routes/playlist-detail-song-list-route.tsx b/src/renderer/features/playlists/routes/playlist-detail-song-list-route.tsx
index 7ee9f2268..1bdade9fa 100644
--- a/src/renderer/features/playlists/routes/playlist-detail-song-list-route.tsx
+++ b/src/renderer/features/playlists/routes/playlist-detail-song-list-route.tsx
@@ -21,7 +21,6 @@ import { JsonPreview } from '/@/renderer/features/shared/components/json-preview
 import { PageErrorBoundary } from '/@/renderer/features/shared/components/page-error-boundary';
 import { AppRoute } from '/@/renderer/router/routes';
 import { useCurrentServer } from '/@/renderer/store';
-import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
 import { Button } from '/@/shared/components/button/button';
 import { Group } from '/@/shared/components/group/group';
 import { Icon } from '/@/shared/components/icon/icon';
@@ -163,19 +162,20 @@ const PlaylistQueryEditor = ({
             <Stack gap={0} h="100%" mah="50dvh" p="md" w="100%">
                 <Group justify="space-between" pb="md" wrap="nowrap">
                     <Group gap="sm" wrap="nowrap">
-                        <ActionIcon
-                            icon={isQueryBuilderExpanded ? 'arrowUpS' : 'arrowDownS'}
-                            iconProps={{
-                                size: 'md',
-                            }}
+                        <Button
+                            leftSection={
+                                <Icon
+                                    icon={isQueryBuilderExpanded ? 'arrowUpS' : 'arrowDownS'}
+                                    size="lg"
+                                />
+                            }
                             onClick={onToggleExpand}
-                            size="xs"
-                        />
-                        <Text>
+                            size="compact-md"
+                        >
                             {t('form.queryEditor.title', {
                                 postProcess: 'titleCase',
                             })}
-                        </Text>
+                        </Button>
                     </Group>
                     <Group gap="xs">
                         <Button