No padding around LivePreview

[baldarian]

Bug Report

Describe the bug

There's no padding around LivePreview. Have a look at the screenshot attached below.

I found out that style object that are being passed to the LivePreview are having wrong properties. I made a screenshot for this too.

Environment

• docz version: [2.2.0]
• OS: [Windows 10]

Additional context/Screenshots

[rakannimer]

Thanks @baldarian for catching and reporting this !

It will be fixed in the next official release, meanwhile you can try it (2.3.0-alpha.3) with yarn add docz@next

[baldarian]

@rakannimer Good to hear. Thanks.

[kayosouza]

Thanks @baldarian for catching and reporting this !

It will be fixed in the next official release, meanwhile you can try it (2.3.0-alpha.3) with yarn add docz@next

still dont't work

[stramel]

Confirmed that ^2.3.0-alpha.3 fixed it for me.

UPDATE: @rakannimer While that issue is fixed, it seems that Headings now bump right up next to the Playgrounds?

[abdullahtariq1171]

Temporory workaround

Add following CSS in your styles somwhere

div[data-testid="live-preview"] {
  padding: 15px;
}

[floriangosse]

I think the most consistent option would be to replace style={styles.preview} in Playground with sx={styles.preview} so that the styles of this element will be handled by theme-ui as well.

- <LivePreview style={styles.preview} data-testid="live-preview" />
+ <LivePreview sx={styles.preview} data-testid="live-preview" />

This solved the rendering issues in my case.

[drewlustro]

UPDATE: @rakannimer While that issue is fixed, it seems that Headings now bump right up next to the Playgrounds?

Yeah, looks like gatsby-theme-docz@next headers have either an erroneous margin: 0 or the Playground wrapper should have some bottom margin.

I think some bottom margin on Playground is the superior style.

(just noticed #1396 – lol)

I think the most consistent option would be to replace style={styles.preview} in Playground with sx={styles.preview} so that the styles of this element will be handled by theme-ui as well.

➕

[kilianc]

This is a temporary patch

// src/gatsby-theme-docz/src/components/Playground/styles.js

export * from 'gatsby-theme-docz/src/components/Playground/styles'

export const preview = {
  margin: 0,
  padding: '20px'
}

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[drewlustro]

Not stale

…

On Sun, May 24, 2020 at 6:56 PM stale[bot] ***@***.***> wrote: This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#1325 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AABPSRPTSQGWXBOOJRY7SFLRTHF6TANCNFSM4J3FDA3Q> .

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[drewlustro]

not stale

…

On Fri, Jul 24, 2020 at 12:04 AM stale[bot] ***@***.***> wrote: This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#1325 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AABPSROPP7HA4AKB4YVOBCDR5EW7BANCNFSM4J3FDA3Q> .

[drewlustro]

🤦‍♀️