Removes default CSS margins on viewport #7742
Conversation
Resets default CSS margins on the body element. This prevents a regression compared to live example running on 5.1.
|
This pull request is automatically deployed with Now. Latest deployment for this branch: https://monorepo-git-fork-quentind-patch-issue-7724.storybook.now.sh |
|
@quentind How does this affect the centered addon zooming behavior that the original PR was trying to fix? Regardless, this fix is more important than the original PR, but it would be great to know whether we'll need to revisit that issue. Thanks! |
|
@shilman I'm not experiencing any issues with the centered addon on 5.1.10 + the changes I've suggested. My understanding is that the changes from PR#7640 can be fully reverted actually since they were simply accounting for the margin on the So this line can be reverted back to: - width: `calc(${nextProps.scale * 100}% - 16px)`,
+ width: `${nextProps.scale * 100}%`,Thank you for the feedback. |
|
@quentind can you add the change you suggest in this PR? |
|
@shilman Done! Thanks |
|
Thanks @quentind. Waiting to merge this until we figure out the implications to visual regression tools that depend on this. |
# Conflicts: # lib/core/src/server/templates/base-preview-head.html
ndelangen
force-pushed
the
patch-issue-7724
branch
from
75fb3c0 to
4df4e13
Compare
|
@ndelangen why does this PR not show any changed files? |
|
Because after merging in next, there were none. I could have just closed the PR, but I think merging makes for a better indication that @quentind contributed, and that's appreciated. |
|
@ndelangen having installed 4fc3b61 (commit that seems to have been due to a merge conflict, and you can see code removed) https://github.com/storybookjs/storybook/blob/1d517d0/lib/core/src/server/templates/base-preview-head.html ( UpdateI've raised #8358 to restore these changes |
This brings back the changes from storybookjs#7742 which seem to have been removed in storybookjs@4fc3b61
Related to issue #7724 and PR#7640
What I did
This resets the default CSS margins on the body element. This prevents having vertical and horizontal scrollbars on the preview viewport as is the case in version 5.1.10, for instance.
This also fixes a regression on the latest version compared to the live examples running on 5.1.3, where there is no whitespace around the preview area.
This 8px whitespace -- the browsers' default margin on the body -- around the preview area is not desirable in my opinion, especially when the previewed component has a width of 100% or is simply a block element.