fix window bar position on mobile layout

src/renderer/layouts/mobile-layout/mobile-layout.module.css

@@ -14,6 +14,11 @@
     background: var(--theme-colors-background);
 }
 
+.windows,
+.macos {
+    grid-template-rows: 30px calc(100vh - 120px) 90px;
+}
+
 .drawer-button {
     position: absolute;
     bottom: calc(90px + 0.75rem);

src/renderer/layouts/mobile-layout/mobile-layout.tsx

@@ -11,10 +11,11 @@ import { CommandPalette } from '/@/renderer/features/search/components/command-p
 import { MobileSidebar } from '/@/renderer/features/sidebar/components/mobile-sidebar';
 import { PlayerBar } from '/@/renderer/layouts/default-layout/player-bar';
 import { useFullScreenPlayerStore } from '/@/renderer/store';
-import { useCommandPalette } from '/@/renderer/store';
+import { useCommandPalette, useWindowSettings } from '/@/renderer/store';
 import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
 import { Drawer } from '/@/shared/components/drawer/drawer';
 import { useDisclosure } from '/@/shared/hooks/use-disclosure';
+import { Platform } from '/@/shared/types/types';
 
 const WindowBar = lazy(() =>
     import('/@/renderer/layouts/window-bar').then((module) => ({
@@ -30,10 +31,17 @@ export const MobileLayout = ({ shell }: MobileLayoutProps) => {
     const { opened, ...handlers } = useCommandPalette();
     const [sidebarOpened, { close: closeSidebar, open: openSidebar }] = useDisclosure(false);
     const { expanded: isFullScreenPlayerExpanded } = useFullScreenPlayerStore();
+    const { windowBarStyle } = useWindowSettings();
 
     return (
         <>
-            <div className={clsx(styles.layout)} id="mobile-layout">
+            <div
+                className={clsx(styles.layout, {
+                    [styles.macos]: windowBarStyle === Platform.MACOS,
+                    [styles.windows]: windowBarStyle === Platform.WINDOWS,
+                })}
+                id="mobile-layout"
+            >
                 {!shell && <WindowBar />}
                 <ActionIcon
                     className={styles.drawerButton}

src/renderer/layouts/window-bar.module.css

@@ -1,8 +1,14 @@
+.window-bar {
+    grid-area: window-bar;
+    height: 30px;
+}
+
 .windows-container {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    width: 100vw;
+    width: 100%;
+    height: 100%;
     background: var(--theme-colors-background);
     border-bottom: 1px solid alpha(var(--theme-colors-border), 0.5);
     -webkit-app-region: drag;
@@ -50,11 +56,23 @@
     white-space: nowrap;
 }
 
+@media only screen and (width < 768px) {
+    .player-status-container {
+        max-width: calc(100vw - 150px);
+        padding-left: 0.5rem;
+    }
+
+    .windows-button-group {
+        width: 120px;
+    }
+}
+
 .macos-container {
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 100vw;
+    width: 100%;
+    height: 100%;
     background: var(--theme-colors-background);
     border-bottom: 1px solid alpha(var(--theme-colors-border), 0.5);
     -webkit-app-region: drag;

src/renderer/layouts/window-bar.tsx

@@ -198,7 +198,7 @@ export const WindowBar = () => {
     }
 
     return (
-        <>
+        <div className={styles.windowBar}>
             {windowBarStyle === Platform.WINDOWS && (
                 <WindowsControls
                     controls={{ handleClose, handleMaximize, handleMinimize }}
@@ -211,6 +211,6 @@ export const WindowBar = () => {
                     title={title}
                 />
             )}
-        </>
+        </div>
     );
 };