Skip to content

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