From a99a02c94cc94d3111a811d9d39e4289813dffa7 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Sat, 29 Nov 2025 04:02:25 -0800
Subject: [PATCH] adjust default modal styles

---
 .../components/playlist-list-header-filters.tsx        | 10 +++-------
 src/shared/components/modal/modal.module.css           |  3 ++-
 src/shared/components/modal/modal.tsx                  |  4 ++--
 3 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/src/renderer/features/playlists/components/playlist-list-header-filters.tsx b/src/renderer/features/playlists/components/playlist-list-header-filters.tsx
index b71a9d694..d6a12d9b8 100644
--- a/src/renderer/features/playlists/components/playlist-list-header-filters.tsx
+++ b/src/renderer/features/playlists/components/playlist-list-header-filters.tsx
@@ -8,31 +8,27 @@ import { ListFilters } from '/@/renderer/features/shared/components/list-filters
 import { ListRefreshButton } from '/@/renderer/features/shared/components/list-refresh-button';
 import { ListSortByDropdown } from '/@/renderer/features/shared/components/list-sort-by-dropdown';
 import { ListSortOrderToggleButton } from '/@/renderer/features/shared/components/list-sort-order-toggle-button';
-import { useContainerQuery } from '/@/renderer/hooks';
-import { useCurrentServer } from '/@/renderer/store';
 import { Button } from '/@/shared/components/button/button';
 import { Divider } from '/@/shared/components/divider/divider';
 import { Flex } from '/@/shared/components/flex/flex';
 import { Group } from '/@/shared/components/group/group';
-import { LibraryItem, PlaylistListSort, ServerType, SortOrder } from '/@/shared/types/domain-types';
+import { LibraryItem, PlaylistListSort, SortOrder } from '/@/shared/types/domain-types';
 import { ItemListKey } from '/@/shared/types/types';
 
 export const PlaylistListHeaderFilters = () => {
     const { t } = useTranslation();
-    const server = useCurrentServer();
-    const { ref, ...cq } = useContainerQuery();
 
     const handleCreatePlaylistModal = () => {
         openModal({
             children: <CreatePlaylistForm onCancel={() => closeAllModals()} />,
-            size: server?.type === ServerType?.NAVIDROME ? 'lg' : 'sm',
+            size: 'lg',
             title: t('form.createPlaylist.title', { postProcess: 'sentenceCase' }),
         });
     };
 
     return (
         <Flex justify="space-between">
-            <Group gap="sm" ref={ref} w="100%">
+            <Group gap="sm" w="100%">
                 <ListSortByDropdown
                     defaultSortByValue={PlaylistListSort.NAME}
                     itemType={LibraryItem.PLAYLIST}
diff --git a/src/shared/components/modal/modal.module.css b/src/shared/components/modal/modal.module.css
index e560795ee..1d2d349e5 100644
--- a/src/shared/components/modal/modal.module.css
+++ b/src/shared/components/modal/modal.module.css
@@ -1,7 +1,7 @@
 .header {
     display: flex;
     justify-content: center;
-    padding: none;
+    margin-bottom: var(--theme-spacing-md);
     background: var(--theme-colors-background);
     border-radius: 0;
 }
@@ -14,6 +14,7 @@
 }
 
 .content {
+    padding: var(--theme-spacing-md);
     overflow: hidden;
     background: var(--theme-colors-background);
     border: 2px solid var(--theme-colors-border);
diff --git a/src/shared/components/modal/modal.tsx b/src/shared/components/modal/modal.tsx
index c7ccec9e9..7d2cab8e1 100644
--- a/src/shared/components/modal/modal.tsx
+++ b/src/shared/components/modal/modal.tsx
@@ -144,8 +144,8 @@ export const ModalsProvider = ({ children, ...rest }: ModalsProviderProps) => {
                     icon: <Icon icon="x" size="xl" />,
                 },
                 overlayProps: {
-                    backgroundOpacity: 0.8,
-                    blur: 4,
+                    backgroundOpacity: 0.5,
+                    blur: 1,
                 },
                 radius: 'xl',
                 scrollAreaComponent: ScrollArea,