Action bar is overlayed with dropzones. | Puck | Page 1

orchid arrow Mar 7, 2025, 7:21 PM

I have a Section block that accepts children, and Stack block which gives some layout options. When clicking on an item inside Stack the action bar is unaccessible because it's overlayed by the dropzones.

I tired playing around with z-indexed but nothing seemed to work.

I also tried using ActionBar in an override but it doesn't accept classNames.

Is there a way to make action bars always on top of other layers?

proven tapir Mar 10, 2025, 1:38 AM

Hey @orchid arrow,

That seems like a bug, it shouldn’t behave like that. I’ll try to reproduce it and see what’s going on.

Hey @orchid arrow,

I tried reproducing it, but I couldn’t. In my case, the ActionBar always appears on top.

Would you mind sharing how you’re setting up your Section and Stack components?

For reference, here’s how I attempted to reproduce your issue:

export const config = {
  components: {
    HeadingBlock: {
      fields: {
        title: { type: "text" },
      },
      defaultProps: {
        title: "Heading",
      },
      render: ({ title }) => {
        return (
          <div style={{ padding: 0 }}>
            <h1>{title}</h1>
          </div>
        );
      },
    },

    Section: {
      render: () => {
        return <DropZone zone="my-section" />;
      },
    },

    Stack: {
      render: () => {
        return (
          <DropZone
            zone="my-stack"
            style={{ display: "flex", flexDirection: "column" }}
          />
        );
      },
    },
  },
};

I then tried to drag and drop a three headings, one on the Section, and the other two in the Stack:

#Action bar is overlayed with dropzones.