fix styling on web titlebar style

src/renderer/features/now-playing/components/sidebar-play-queue.tsx

@@ -4,12 +4,10 @@ import { useRef } from 'react';
 
 import { PlayQueueListControls } from './play-queue-list-controls';
 
-import { PageHeader } from '/@/renderer/components/page-header/page-header';
 import { VirtualGridContainer } from '/@/renderer/components/virtual-grid';
 import { PlayQueue } from '/@/renderer/features/now-playing/components/play-queue';
 import { useWindowSettings } from '/@/renderer/store/settings.store';
 import { Box } from '/@/shared/components/box/box';
-import { Stack } from '/@/shared/components/stack/stack';
 import { Song } from '/@/shared/types/domain-types';
 import { Platform } from '/@/shared/types/types';
 
@@ -20,14 +18,9 @@ export const SidebarPlayQueue = () => {
     const isWeb = windowBarStyle === Platform.WEB;
     return (
         <VirtualGridContainer>
-            {isWeb && (
-                <Stack mr={isWeb ? '130px' : undefined}>
-                    <PageHeader />
-                </Stack>
-            )}
             <Box
                 display={!isWeb ? 'flex' : undefined}
-                h={!isWeb ? '65px' : undefined}
+                h="65px"
             >
                 <PlayQueueListControls
                     tableRef={queueRef}

src/renderer/features/window-controls/components/window-controls.module.css

@@ -3,6 +3,7 @@
     width: 130px;
     height: 100%;
     -webkit-app-region: no-drag;
+    background-color: var(--theme-colors-background);
 }
 
 .windows-button {
@@ -25,5 +26,7 @@
 }
 
 .windows-button.exit-button {
-    background: var(--theme-colors-state-error);
+    &:hover {
+        background: var(--theme-colors-state-error);
+    }
 }

src/renderer/features/window-controls/components/window-controls.tsx

@@ -7,10 +7,6 @@ import styles from './window-controls.module.css';
 
 const browser = isElectron() ? window.api.browser : null;
 
-interface WindowControlsProps {
-    style?: 'linux' | 'macos' | 'windows';
-}
-
 const close = () => browser?.exit();
 
 const minimize = () => browser?.minimize();
@@ -19,7 +15,7 @@ const maximize = () => browser?.maximize();
 
 const unmaximize = () => browser?.unmaximize();
 
-export const WindowControls = ({ style }: WindowControlsProps) => {
+export const WindowControls = () => {
     const [max, setMax] = useState(false);
 
     const handleMinimize = () => minimize();
@@ -39,29 +35,29 @@ export const WindowControls = ({ style }: WindowControlsProps) => {
         <>
             {isElectron() && (
                 <>
-                    {style === 'windows' && (
-                        <div className={styles.windowsButtonGroup}>
-                            <div
-                                onClick={handleMinimize}
-                                role="button"
-                            >
-                                <RiSubtractLine size={19} />
-                            </div>
-                            <div
-                                onClick={handleMaximize}
-                                role="button"
-                            >
-                                <RiCheckboxBlankLine size={13} />
-                            </div>
-                            <div
-                                className={clsx(styles.windowsButton, styles.exitButton)}
-                                onClick={handleClose}
-                                role="button"
-                            >
-                                <RiCloseLine size={19} />
-                            </div>
+                    <div className={styles.windowsButtonGroup}>
+                        <div
+                            className={styles.windowsButton}
+                            onClick={handleMinimize}
+                            role="button"
+                        >
+                            <RiSubtractLine size={19} />
                         </div>
-                    )}
+                        <div
+                            className={styles.windowsButton}
+                            onClick={handleMaximize}
+                            role="button"
+                        >
+                            <RiCheckboxBlankLine size={13} />
+                        </div>
+                        <div
+                            className={clsx(styles.windowsButton, styles.exitButton)}
+                            onClick={handleClose}
+                            role="button"
+                        >
+                            <RiCloseLine size={19} />
+                        </div>
+                    </div>
                 </>
             )}
         </>

src/shared/styles/global.css

@@ -321,6 +321,7 @@ button {
     }
 
     .ag-header {
+        width: auto;
         border-bottom: 2px solid var(--theme-colors-border);
     }