Dropzone has 0 width in empty editor preventing initial drop.

[lecstor]

Following the Getting Started guide has me an editor I cannot drop the header into as the dropzone has no width.

The demo behaves differently, even when deleting the header and footer leaving only the dropzone.

import { Config, Data, Puck } from "@measured/puck";
import type { ReactNode } from "react";

import "@measured/puck/puck.css";

type Components = {
  HeadingBlock: { children: ReactNode };
};

// Create Puck component config
const config: Config<Components> = {
  components: {
    HeadingBlock: {
      fields: {
        children: {
          type: "text",
        },
      },
      defaultProps: {
        children: "Heading",
      },
      render: ({ children }: { children: ReactNode }) => {
        return <h1>{children}</h1>;
      },
    },
  },
};

// Describe the initial data
const initialData = {};

// Save the data to your database
const save = (data: Data) => console.log(data);

// Render Puck editor
export function Editor() {
  return <Puck config={config} data={initialData} onPublish={save} />;
}

[lecstor]

ok, my bad.. I used yarn create vite to generate an app which I added puck to without gutting the css. This little nugget broke things (specifically display: flex).

body {
  margin: 0;
  display: flex;
  place-items: center;
  min-width: 320px;
  min-height: 100vh;
}