use margin bottom for notifications component to not disable center controls

src/renderer/app.tsx

@@ -190,7 +190,16 @@ export const App = () => {
 
     return (
         <MantineProvider defaultColorScheme={mode as 'dark' | 'light'} theme={theme}>
-            <Notifications containerWidth="300px" position="bottom-center" zIndex={50000} />
+            <Notifications
+                containerWidth="300px"
+                position="bottom-center"
+                styles={{
+                    root: {
+                        marginBottom: 90,
+                    },
+                }}
+                zIndex={50000}
+            />
             <PlayQueueHandlerContext.Provider value={providerValue}>
                 <WebAudioContext.Provider value={webAudioProvider}>
                     <AppRouter />

src/renderer/features/player/components/center-controls.tsx

@@ -113,7 +113,7 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
 
     return (
         <>
-            <div className={styles.controlsContainer}>
+            <div className={styles.controlsContainer} style={{ zIndex: 50001 }}>
                 <div className={styles.buttonsContainer}>
                     <PlayerButton
                         icon={<Icon fill="default" icon="mediaStop" size={buttonSize - 2} />}

src/shared/components/toast/toast.module.css

@@ -1,5 +1,4 @@
 .root {
-    bottom: 90px;
     background-color: var(--theme-colors-surface);
 }