Move drag container to scrollarea component

src/renderer/components/page-header/index.tsx

@@ -79,24 +79,6 @@ const TitleWrapper = styled(motion.div)`
     height: 100%;
 `;
 
-const DragContainer = styled.div`
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: -1;
-    width: calc(100% - 130px);
-    height: 65px;
-    -webkit-app-region: drag;
-
-    button {
-        -webkit-app-region: no-drag;
-    }
-
-    input {
-        -webkit-app-region: no-drag;
-    }
-`;
-
 const variants: Variants = {
     animate: {
         opacity: 1,
@@ -125,8 +107,6 @@ export const PageHeader = ({
 
     return (
         <>
-            {windowBarStyle === Platform.WEB && <DragContainer />}
-            {!isHidden && (
             <Container
                 ref={ref}
                 $height={height}
@@ -151,14 +131,11 @@ export const PageHeader = ({
                 </Header>
                 {backgroundColor && (
                     <>
-                            <BackgroundImage
+                        <BackgroundImage $background={backgroundColor || 'var(--titlebar-bg)'} />
-                                $background={backgroundColor || 'var(--titlebar-bg)'}
-                            />
                         <BackgroundImageOverlay theme={theme as 'light' | 'dark'} />
                     </>
                 )}
             </Container>
-            )}
         </>
     );
 };

src/renderer/components/scroll-area/index.tsx

@@ -9,6 +9,24 @@ import { PageHeader, PageHeaderProps } from '/@/renderer/components/page-header'
 import { useWindowSettings } from '/@/renderer/store/settings.store';
 import { Platform } from '/@/renderer/types';
 
+const DragContainer = styled.div`
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: -1;
+    width: calc(100% - 130px);
+    height: 65px;
+    -webkit-app-region: drag;
+
+    button {
+        -webkit-app-region: no-drag;
+    }
+
+    input {
+        -webkit-app-region: no-drag;
+    }
+`;
+
 interface ScrollAreaProps extends MantineScrollAreaProps {
     children: ReactNode;
 }
@@ -128,12 +146,15 @@ export const NativeScrollArea = forwardRef(
 
         return (
             <>
+                {windowBarStyle === Platform.WEB && <DragContainer />}
+                {shouldShowHeader && (
                     <PageHeader
                         animated
-                    isHidden={!shouldShowHeader}
+                        isHidden={false}
                         position="absolute"
                         {...pageHeaderProps}
                     />
+                )}
                 <StyledNativeScrollArea
                     ref={mergedRef}
                     $scrollBarOffset={scrollBarOffset}