Some doc pages are not responsive

[DarkC35]

trafficstars

Describe the issue

Some of the pages on hacs.xyz breaks the responsive behaviour of the page on mobile devices. I tried to make a PR to fix some of the problems but it turns out that I don't quite understand most of the docusaurus magic. Therefore I want to share some findings that could help to resolve this issue:

1. The home page

For the home page (/pages/index.js) I found the two places why the page gets wider than 100%: The first place is the buttons div. This problem can be solved in the css for .buttons in the styles.module.css with an additional property flex-wrap: warp; or by changing the flex-direction in the media query area with e.g.

@media screen and (max-width: 966px) {
  .heroBanner {
    /* ... */
  }
  .buttons {
    flex-direction: row;
  }
}

For styling a margin could be added to each button so that the buttons don't stick that close together (like in official docusaurus page, simply inspect the source of the "Get Started" and "Try a Demo" buttons on docusaurus.io). After this change I still got a small x-scrollbar that was caused by the <div class="container"> that surrounds the Carousel component. After I removed this div the home page was working as expected (it showed no x-scrollbar on mobile devices; I tested it with the Firefox F12 dev tools).

2. Multi-line code blocks

The second problem I found was that each page that uses a wide multi-line code block (e.g. https://hacs.xyz/docs/developer/documentation and https://hacs.xyz/docs/developer/frontend ) the site breaks on mobile as it does not append the x-scrollbar to the code block but on the whole page. Unfortunately I didn't figured out what causes this issue as this behaviour works as intended on the official docusaurus page, see https://docusaurus.io/docs/markdown-features/code-blocks I tried to update the docusaurus version too but this didn't resolved this issue.

Nice to have

When someone knows how to fix this issue (mabye it's really easy and I'm just blind) it would be cool to fix the spelling on this line documentation/configuration/legacy.md:11: indended ==> intended, indented (and maybe follow-up findings) as all GH actions on https://github.com/hacs/documentation/actions seem to break because of this one ;D

I hope this findings can help to improve the docs page on mobile devices :)

Screenshots

Some screenshots with the Firefox DevTools Mobile Emulator (Pixel 2 Android 8.0 preset) of the current state of the hacs docs:

[hacs-bot[bot]]

Make sure you have read the issue guidelines and that you filled out the entire template.

If you have an issue identical to this, do not add comments like "same here", "i have this too", instead add a :+1: reaction to the issue description. Thanks! :+1:

[ludeeus]

Thanks for checking, changes has been implemented in https://github.com/hacs/documentation/commit/8484b6fec3a8feadba100ab8c105a14e46b4d0f7