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.

[sean-dealhouse]

Hi 👋 I've just started using Puck and also want to say it's an amazing tool! I'm also having this problem though, I'd be happy to use custom interfaces, but could you provide an example of how to use custom interfaces so that the Editor looks like the default? I'm using Puck in a nextJS project and it's overriding my side/top nav. I'm happy with the default look of the editor, I just need it to not hide my side/top nav with position: fixed. I've gone with the relative workaround suggested above for now 👍

[chrisvxd]

@sean-dealhouse I'd use the above solution and we can address this issue properly, so you don't need custom interfaces.

[mmatuk]

Following along with this also. I would like to have more control over the styling of the layout and some container element. So you do have Puck as a class you can target, but it would be nice if we could also target PuckLayout and other elements directly too. Either from custom-interfaces or targeting certain class names.