fix: hide description when width is below the small breakpoint

[lorumic]

Done

Even in its shortened version, the description for the table pagination goes new line multiple times on small widths:

To solve this, the description element is now hidden when width is below the small breakpoint.

QA

Storybook

To see rendered examples of all react-components, run:

yarn start

QA in your project

from react-components run:

yarn build
npm pack

Install the resulting tarball in your project with:

yarn add <path-to-tarball>

QA steps

• On any storybook example for the table pagination, resize the window so that the width is lower than 620px (small breakpoint).
• Check that the description is hidden.

[webteam-app]

Demo starting at https://react-components-1043.demos.haus

[mas-who]

Not sure why, seems like the description is hidden when screen width is 850px instead of 620px for some reason, not sure why since I see the media query is applied for 620px. Also, should we also adjust the container to justify content to flex-end when the description is hidden to make sure the controls are always right aligned?

[lorumic]

Not sure why, seems like the description is hidden when screen width is 850px instead of 620px for some reason, not sure why since I see the media query is applied for 620px.

I think this happens because the storybook example is placed inside an iframe, so what you should consider is not your window's width, but the iframe width.

Also, should we also adjust the container to justify content to flex-end when the description is hidden to make sure the controls are always right aligned?

Sure, will push a fix for this shortly.

[mas-who]

Not sure why, seems like the description is hidden when screen width is 850px instead of 620px for some reason, not sure why since I see the media query is applied for 620px.

I think this happens because the storybook example is placed inside an iframe, so what you should consider is not your window's width, but the iframe width.

Yes, that's true, sorry for the confusion 👍

Also, should we also adjust the container to justify content to flex-end when the description is hidden to make sure the controls are always right aligned?

Sure, will push a fix for this shortly.

Thanks! 👍

[lorumic]

Also, should we also adjust the container to justify content to flex-end when the description is hidden to make sure the controls are always right aligned?

Fixed this. Also, I changed the margin slightly to make it more uniform and balanced between top and bottom. I think the "top-only" margin comes from the implementation in LXD UI, where the table pagination is above the table, and the spacing between it and the table itself is handled by some other element (the table itself or its wrapper maybe?), but for the general case I think it would be better to have a balanced margin, so that it works well also when the table pagination is below the table, perhaps at the bottom of the page constraining the height of a ScrollableTable above it - which is our use case in Anbox. :)

[mas-who]

Also, should we also adjust the container to justify content to flex-end when the description is hidden to make sure the controls are always right aligned?

Fixed this. Also, I changed the margin slightly to make it more uniform and balanced between top and bottom. I think the "top-only" margin comes from the implementation in LXD UI, where the table pagination is above the table, and the spacing between it and the table itself is handled by some other element (the table itself or its wrapper maybe?), but for the general case I think it would be better to have a balanced margin, so that it works well also when the table pagination is below the table, perhaps at the bottom of the page constraining the height of a ScrollableTable above it - which is our use case in Anbox. :)

Yeah that sounds good to me, I think project specific styling requirements should be dealt with in the project itself, making the spacing general for the component here makes sense 👍

The change isn't reflecting on demo server though, I see it's still got the margin-top: 1.2rem applied. Can we do a force push maybe to just trigger another build? I'd like to just have a look at the component

[lorumic]

The change isn't reflecting on demo server though, I see it's still got the margin-top: 1.2rem applied. Can we do a force push maybe to just trigger another build? I'd like to just have a look at the component

I think we sorted out that this was a caching issue, let me know if you can see the changes now.

[mas-who]

LGTM 👍

[github-actions]

🎉 This PR is included in version 0.50.3 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀