Non full screen width editor

[leccles1]

Hi!

I'm currently evaluating Puck for use in my project and this is by far the most intuitive DnD page builder I've come across! I just have one small question which I'm not sure if I'm just over looking.

Is there a way to render the editor in available space rather than it being position: fixed, left: 0, top: 0?

I've got a side navigation in my app, and the main content area to the right, and I want to render the editor in the main content space, rather than it taking the full screen width as you can see in the screenshot, it always renders behind my own side nav. I've tracked it down to the following CSS, but because the below CSS is applied in a Nested <div> I can't seem to get a CSS selector to actually target the position: fixed in order to override it.

.Puck {
  --puck-space-px: 16px;
  bottom: 0;
  font-family: var(--puck-font-family);
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
}

The closest I've gotten is by following the custom interfaces documentation (https://puckeditor.com/docs/extending-puck/custom-interfaces) however I'd rather not have to re-implement each part of the default editor interface.

Am I just missing something / is it possible to get the editor to adhere to constraints from the wrapping container like the example below;

<main className="w-screen flex-1">
   <Puck config={config} data={initialData} onPublish={save} />
</main>

Thanks!

[leccles1]

Ah! So I did manage to achieve it after all with nth-child selector in tailwind;

return (
    <main className="max-w-screen-2xl [&_div:nth-child(1)]:!relative">
      <Puck config={config} data={initialData} onPublish={save} />
    </main>
  );

But could be adverse to breaking changes quite easily, perhaps there is a cleaner way still

[chrisvxd]

Hey @leccles1! This has been on my radar for a while. Let's keep the issue open and I'll have a look at it sometime soon.

However, I suspect the best way for you to implement Puck in your use-case might be via custom interfaces: https://puckeditor.com/docs/extending-puck/custom-interfaces

[ellisium]

hello, first good job and promising project. It will be great to get a way to override the global layout passing some style props.
thanx again to share it

[chrisvxd]

Hi @ellisium - Puck's custom interface API will probably have your back. We're also exploring theming in #139.