fix: fixed header rendering flash and product card image ratio

packages/visual-editor/locales/en/visual-editor.json

@@ -379,7 +379,6 @@
       "small_text size": "Small",
       "spotlight": "Spotlight",
       "start": "Start",
-      "sticky": "Sticky",
       "sunday": "Sunday",
       "three": "Three",
       "thursday": "Thursday",

packages/visual-editor/src/components/configs/directoryConfig.tsx

@@ -62,7 +62,11 @@ export const directoryConfig: Config<DirectoryConfigProps> = {
       return (
         <DropZone
           zone="default-zone"
-          style={{ display: "flex", flexDirection: "column", height: "100vh" }}
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            minHeight: "100vh",
+          }}
         />
       );
     },

packages/visual-editor/src/components/configs/locatorConfig.tsx

@@ -61,7 +61,11 @@ export const locatorConfig: Config<LocatorConfigProps> = {
       return (
         <DropZone
           zone="default-zone"
-          style={{ display: "flex", flexDirection: "column", height: "100vh" }}
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            minHeight: "100vh",
+          }}
         />
       );
     },

packages/visual-editor/src/components/configs/mainConfig.tsx

@@ -72,7 +72,11 @@ export const mainConfig: Config<MainConfigProps> = {
       return (
         <DropZone
           zone="default-zone"
-          style={{ display: "flex", flexDirection: "column", height: "100vh" }}
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            minHeight: "100vh",
+          }}
           disallow={AdvancedCoreInfoCategory.filter((k) => k !== "Grid")}
         />
       );

packages/visual-editor/src/components/directory/Directory.tsx

@@ -87,8 +87,8 @@ const DirectoryComponent: PuckComponent<DirectoryProps> = ({
     <Background background={styles.backgroundColor}>
       <slots.BreadcrumbsSlot style={{ height: "auto" }} />
       <PageSection className="flex flex-col items-center gap-2">
-        <slots.SiteNameSlot style={{ height: "auto" }} />
-        <slots.TitleSlot style={{ height: "auto" }} />
+        <slots.SiteNameSlot style={{ height: "auto", width: "100%" }} />
+        <slots.TitleSlot style={{ height: "auto", width: "100%" }} />
       </PageSection>
       {streamDocument.dm_directoryChildren &&
         isDirectoryGrid(streamDocument.dm_directoryChildren) && (

packages/visual-editor/src/components/header/ExpandedHeader.tsx

@@ -15,8 +15,8 @@ import { defaultSecondaryHeaderProps } from "./SecondaryHeaderSlot.tsx";
 export const headerWrapper = cva("flex flex-col", {
   variants: {
     position: {
-      sticky: "sticky top-0 z-50",
-      fixed: "fixed top-0 left-0 right-0 z-50",
+      // We use 'sticky' for fixed so that content does not overlap at the top of the page
+      fixed: "sticky top-0 z-50",
       scrollsWithPage: "",
     },
   },
@@ -28,8 +28,8 @@ export const headerWrapper = cva("flex flex-col", {
 export interface ExpandedHeaderStyles {
   /** The maximum width of the header */
   maxWidth: PageSectionProps["maxWidth"];
-  /** Whether the header is "sticky" or not */
-  headerPosition: "sticky" | "fixed" | "scrollsWithPage";
+  /** Whether the header is fixed to the top of the page or not */
+  headerPosition: "fixed" | "scrollsWithPage";
 }
 
 export interface ExpandedHeaderProps {
@@ -73,7 +73,6 @@ const expandedHeaderSectionFields: Fields<ExpandedHeaderProps> = {
               label: msg("fields.options.scrollsWithPage", "Scrolls with Page"),
               value: "scrollsWithPage",
             },
-            { label: msg("fields.options.sticky", "Sticky"), value: "sticky" },
             { label: msg("fields.options.fixed", "Fixed"), value: "fixed" },
           ],
         }
@@ -103,33 +102,9 @@ const ExpandedHeaderWrapper: PuckComponent<ExpandedHeaderProps> = ({
   styles,
   slots,
 }) => {
-  const headerRef = React.useRef<HTMLDivElement>(null);
-  const [headerHeight, setHeaderHeight] = React.useState(0);
-
-  React.useEffect(() => {
-    if (!headerRef.current) {
-      return;
-    }
-
-    const resizeObserver = new ResizeObserver(() => {
-      setHeaderHeight(headerRef.current?.offsetHeight ?? 0);
-    });
-
-    resizeObserver.observe(headerRef.current);
-    return () => {
-      return resizeObserver.disconnect();
-    };
-  }, []);
-
   return (
     <>
-      {styles.headerPosition === "fixed" && headerHeight > 0 ? (
-        <div style={{ minHeight: headerHeight }} />
-      ) : null}
-      <div
-        ref={headerRef}
-        className={headerWrapper({ position: styles.headerPosition })}
-      >
+      <div className={headerWrapper({ position: styles.headerPosition })}>
         {/* Secondary Header (Top Bar) */}
         <div className="hidden md:flex">
           <slots.SecondaryHeaderSlot

packages/visual-editor/src/components/header/SecondaryHeaderSlot.tsx

@@ -123,7 +123,7 @@ const SecondaryHeaderSlotWrapper: PuckComponent<SecondaryHeaderSlotProps> = ({
       background={styles.backgroundColor}
       className="md:flex md:justify-end md:gap-6 md:items-center"
     >
-      <slots.LinksSlot style={{ height: "auto" }} />
+      <slots.LinksSlot style={{ height: "auto", width: "fit-content" }} />
       {data.showLanguageDropdown && showLanguageSelector && (
         <LanguageDropdown {...languageDropDownProps} />
       )}

packages/visual-editor/src/components/migrations/0046_merge_sticky_and_fixed_header.ts

@@ -0,0 +1,13 @@
+import { Migration } from "../../utils/migrate";
+
+export const mergeStickyAndFixedHeader: Migration = {
+  ExpandedHeader: {
+    action: "updated",
+    propTransformation: (props) => {
+      if (props.styles?.headerPosition === "sticky") {
+        props.styles.headerPosition = "fixed";
+      }
+      return props;
+    },
+  },
+};

packages/visual-editor/src/components/migrations/migrationRegistry.ts

@@ -44,6 +44,8 @@ import { expandedFooterSlots } from "./0042_expanded_footer_slots.ts";
 import { setDefaultCtaVariants } from "./0043_set_default_cta_variants.ts";
 import { fixRootMetaFieldsMigration } from "./0044_fix_root_meta_fields.ts";
 
+import { mergeStickyAndFixedHeader } from "./0046_merge_sticky_and_fixed_header.ts";
+
 // To add a migration:
 // Create a new file in this directory that exports a Migration
 // Import it in this file and add it to this array.
@@ -94,4 +96,6 @@ export const migrationRegistry: MigrationRegistry = [
   expandedFooterSlots,
   setDefaultCtaVariants,
   fixRootMetaFieldsMigration,
+  {},
+  mergeStickyAndFixedHeader,
 ];

packages/visual-editor/src/components/pageSections/ProductSection/ProductCard.tsx

@@ -336,7 +336,11 @@ const ProductCardComponent: PuckComponent<ProductCardProps> = (props) => {
       background={styles.backgroundColor}
       ref={puck.dragRef}
     >
-      <slots.ImageSlot className="h-auto sm:min-h-[200px]" allow={[]} />
+      <slots.ImageSlot
+        style={{ height: "fit-content" }}
+        className="sm:min-h-[200px]"
+        allow={[]}
+      />
       <div className="p-8 gap-8 flex flex-col">
         <div className="gap-4 flex flex-col flex-grow">
           <slots.TitleSlot style={{ height: "auto" }} allow={[]} />

packages/visual-editor/src/docs/ai/components.d.ts

@@ -523,8 +523,8 @@ interface VideoSectionProps {
 interface ExpandedHeaderStyles {
   /** The maximum width of the header */
   maxWidth: PageSectionProps["maxWidth"];
-  /** Whether the header is "sticky" or not */
-  headerPosition: "sticky" | "fixed" | "scrollsWithPage";
+  /** Whether the header is fixed to the top of the page or not */
+  headerPosition: "fixed" | "scrollsWithPage";
 }
 
 interface ExpandedFooterData {

packages/visual-editor/src/docs/components.md

@@ -273,10 +273,10 @@ The Expanded Header is a two-tiered component for websites with complex navigati
 
 This object contains properties for customizing the appearance of both header tiers.
 
-| Prop                    | Type                                       | Description                           | Default |
-| :---------------------- | :----------------------------------------- | :------------------------------------ | :------ |
-| `styles.headerPosition` | `"sticky" \| "fixed" \| "scrollsWithPage"` | Whether the header is "sticky" or not |         |
-| `styles.maxWidth`       | `PageSectionProps["maxWidth"]`             | The maximum width of the header       |         |
+| Prop                    | Type                           | Description                                               | Default |
+| :---------------------- | :----------------------------- | :-------------------------------------------------------- | :------ |
+| `styles.headerPosition` | `"fixed" \| "scrollsWithPage"` | Whether the header is fixed to the top of the page or not |         |
+| `styles.maxWidth`       | `PageSectionProps["maxWidth"]` | The maximum width of the header                           |         |
 
 ---
 

packages/visual-editor/src/vite-plugin/templates/locator.tsx

@@ -141,11 +141,7 @@ const Locator: Template<TemplateRenderProps> = (props) => {
         <VisualEditorProvider templateProps={props}>
           <Render
             config={locatorConfig}
-            data={migrate(
-              JSON.parse(document.__.layout),
-              migrationRegistry,
-              locatorConfig
-            )}
+            data={data}
             metadata={{ streamDocument: document }}
           />
         </VisualEditorProvider>