fix: restore reveal and sticky behaviors by removing global padding

Author: fyalavuz

packages/react/__tests__/Header.test.tsx

@@ -76,10 +76,10 @@ describe("Header", () => {
       expect(header?.className).not.toContain("sticky");
     });
 
-    it("renders fixed header with fixed positioning", () => {
+    it("renders fixed header with sticky positioning", () => {
       const { container } = renderHeader({ behavior: "fixed" });
       const header = container.querySelector("header");
-      expect(header?.className).toContain("fixed");
+      expect(header?.className).toContain("sticky");
     });
   });
 

packages/react/src/AppShell.tsx

@@ -38,10 +38,7 @@ function AppShellInner({ safeArea = false, className, children }: AppShellProps)
   });
 
   return (
-    <div 
-      className={cn("flex min-h-dvh flex-col relative", className)}
-      style={{ paddingTop: "var(--header-height, 0px)" }}
-    >
+    <div className={cn("flex min-h-dvh flex-col relative", className)}>
       {header}
       <SafeArea edges={["bottom"]} className="flex flex-col flex-1">
         {otherChildren}

packages/react/src/Header.tsx

@@ -266,10 +266,11 @@ export const Header = memo(function Header({
       <header
         ref={ghostRef}
         className={cn(
-          "w-full fixed top-0 left-0 right-0 z-50 transition-colors duration-300",
+          "w-full sticky top-0 z-50 transition-colors duration-300",
           t.wrapper,
           className
         )}
+        style={{ paddingTop: "env(safe-area-inset-top, 0px)" }}
       >
         <HeaderProvider value={{ theme }}>
           {renderNavRow()}