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,40 +107,35 @@ export const PageHeader = ({
 
     return (
         <>
-            {windowBarStyle === Platform.WEB && <DragContainer />}
+            <Container
-            {!isHidden && (
+                ref={ref}
-                <Container
+                $height={height}
-                    ref={ref}
+                $position={position}
-                    $height={height}
+                {...props}
-                    $position={position}
+            >
-                    {...props}
+                <Header
+                    $isDraggable={windowBarStyle === Platform.WEB}
+                    $isHidden={isHidden}
+                    $padRight={padRight}
                 >
-                    <Header
+                    <AnimatePresence initial={animated ?? false}>
-                        $isDraggable={windowBarStyle === Platform.WEB}
+                        <TitleWrapper
-                        $isHidden={isHidden}
+                            animate="animate"
-                        $padRight={padRight}
+                            exit="exit"
-                    >
+                            initial="initial"
-                        <AnimatePresence initial={animated ?? false}>
+                            variants={variants}
-                            <TitleWrapper
+                        >
-                                animate="animate"
+                            {children}
-                                exit="exit"
+                        </TitleWrapper>
-                                initial="initial"
+                    </AnimatePresence>
-                                variants={variants}
+                </Header>
-                            >
+                {backgroundColor && (
-                                {children}
+                    <>
-                            </TitleWrapper>
+                        <BackgroundImage $background={backgroundColor || 'var(--titlebar-bg)'} />
-                        </AnimatePresence>
+                        <BackgroundImageOverlay theme={theme as 'light' | 'dark'} />
-                    </Header>
+                    </>
-                    {backgroundColor && (
+                )}
-                        <>
+            </Container>
-                            <BackgroundImage
-                                $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 (
             <>
-                <PageHeader
+                {windowBarStyle === Platform.WEB && <DragContainer />}
-                    animated
+                {shouldShowHeader && (
-                    isHidden={!shouldShowHeader}
+                    <PageHeader
-                    position="absolute"
+                        animated
-                    {...pageHeaderProps}
+                        isHidden={false}
-                />
+                        position="absolute"
+                        {...pageHeaderProps}
+                    />
+                )}
                 <StyledNativeScrollArea
                     ref={mergedRef}
                     $scrollBarOffset={scrollBarOffset}