fix: allow theme buttons to wrap when many themes

[micmro]

Hi @semoal, first of all thanks for your great addon!

Issue

I noticed one issue when using themeprovider-storybook with many themes - they get all squeezed together and become illegible (see screenshot below):

Suggested fix

I've made some minor changes to the styles to allow the theme-buttons to wrap if they fill up the full width available:

There is no change if all of the themes fit into the first line:

Tested in the latest Chrome, FF, Safari and Edge.

Test Scaffolding

To test this behaviour and add the scaffolding to add 17 themes you could instead merge the docs/allow-theme-buttons-to-wrap-demo branch instead.

In a just I've added some copies of THEMES[0]:

const MANY_THEMES = THEMES.concat(new Array(15).fill(null).map((_, i) => ({
  ...THEMES[0],
  name: `Theme ${i + 1}`,
  backgroundColor: `#${i.toString(16).repeat(6)}`,
})))

[commit-lint]

Features

• allow theme-buttons to wrap (7eda2b5)

Contributors

micmro

Commit-Lint commands

You can trigger Commit-Lint actions by commenting on this PR:

• @Commit-Lint merge patch will merge dependabot PR on "patch" versions (X.X.Y - Y change)
• @Commit-Lint merge minor will merge dependabot PR on "minor" versions (X.Y.Y - Y change)
• @Commit-Lint merge major will merge dependabot PR on "major" versions (Y.Y.Y - Y change)
• @Commit-Lint merge disable will desactivate merge dependabot PR
• @Commit-Lint review will approve dependabot PR
• @Commit-Lint stop review will stop approve dependabot PR

[semoal]

Yay, looks good to me! Thanks for contributing! Much appreciated

[semoal]

🎉 This PR is included in version 1.7.2 🎉

The release is available on:

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

Your semantic-release bot 📦🚀