Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix display of large components #1237

Merged
merged 3 commits into from
Jul 7, 2017
Merged

Conversation

su-narthur
Copy link
Contributor

Add CSS to allow for oversized components to scroll in all directions. See issue #1225.

Issue: Overflowing portions of large components are inaccessible when using Centered plugin.

What I did

I added overflow: auto to the outer wrapper and margin: auto to a new inner wrapper.

How to test

Create a component larger than your viewport and check that you can stroll both up and down to see the entire component.

Add CSS to allow for oversized components to scroll in all directions. See [issue storybookjs#1225](storybookjs#1225 (comment)).
@codecov
Copy link

codecov bot commented Jun 9, 2017

Codecov Report

Merging #1237 into master will not change coverage.
The diff coverage is 0%.

Impacted file tree graph

@@           Coverage Diff           @@
##           master    #1237   +/-   ##
=======================================
  Coverage   14.35%   14.35%           
=======================================
  Files         201      201           
  Lines        4612     4612           
  Branches      504      498    -6     
=======================================
  Hits          662      662           
- Misses       3516     3518    +2     
+ Partials      434      432    -2
Impacted Files Coverage Δ
addons/centered/src/index.js 0% <0%> (ø) ⬆️
...rc/modules/ui/components/left_panel/text_filter.js 33.33% <0%> (ø) ⬆️
lib/ui/src/modules/api/actions/api.js 49.42% <0%> (ø) ⬆️
addons/info/src/components/Node.js 0% <0%> (ø) ⬆️
addons/info/src/components/markdown/htags.js 0% <0%> (ø) ⬆️
app/react/src/client/preview/config_api.js 0% <0%> (ø) ⬆️
lib/ui/src/modules/ui/containers/layout.js 12.5% <0%> (ø) ⬆️
...codemod/src/transforms/update-organisation-name.js 40.62% <0%> (ø) ⬆️
app/react/src/server/babel_config.js 44.82% <0%> (ø) ⬆️
lib/ui/src/modules/ui/libs/filters.js 41.66% <0%> (ø) ⬆️
... and 17 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update d054507...8e89aa8. Read the comment docs.

export default function(storyFn) {
return <div style={style}>{storyFn()}</div>;
return <div style={style}><div style={innerStyle}>{storyFn()}</div></div>;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think adding another container defeats the purpose of the centered addon, I'll have to test.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Were you able to test this? I'd be happy to try to improve the fix if this proves to have problems.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'll test this

@ndelangen ndelangen added the ui label Jun 9, 2017
@ndelangen ndelangen added this to the v3.1.3 milestone Jun 9, 2017
@shilman shilman modified the milestones: v3.1.3, v3.1.4 Jun 10, 2017
@ndelangen
Copy link
Member

It works wonders! Thanks you, you are awesome @su-narthur!

Sorry it took so long to view and merge, totally my fault!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants