Footer UI defects on Redoc sidebar

[jrub]

Hi there, I built the Redoc component as the main page and the footer is showing some glitches as the Redocly watermark shows above it. I'm using the default themes. Any ideas or tips to improve it? Thx

[rohit-gohri]

Can recreate this on the example website - https://redocusaurus.vercel.app/docs/nested/nested-1#tag/store_model

[jrub]

Also note that depending on the screen size, when using three colums they stack too soon

[rohit-gohri]

Any ideas or tips to improve it?

I don't really have a fix for this. You might have to fix this with some custom css like the custom fixes already added here - https://github.com/rohit-gohri/redocusaurus/blob/main/packages/docusaurus-theme-redoc/src/theme/Redoc/styles.css

Would be happy to merge and release a PR.

Also note that depending on the screen size, when using three colums they stack too soon

That is just default docusaurus theme, nothing to do with redoc.

[Innders]

If you are looking for a quick fix. Then you can add this css to your custom.css file.

.menu-content .scrollbar-container > ul + div {
    position: relative;
}

[jrub]

Thanks @Innders , however I don't see any .menu-content or .scrollbar-container on my code? 🤔

[Innders]

@jrub you need to add that whole code snippet above to the default custom.css file that's created when you initialised docusaurus.

[jrub]

@Innders well I recreated the file as I removed it at some point, but it did not work. I had this when I initialised: jrub/redocusaurus_test@ee18599#diff-44813f307e729042af7e70beff6f32ea63a7941bc100043a49e84d229ea2570f so I think it might be a different thing form what you're getting? (as again, those classes are not around). Thanks again!

[Innders]

@jrub make sure you uncomment this line in your docusaurus.config.js file. Otherwise the CSS file won't be included in your build and none of those styles will be applied.

I just tried it in your repo and it worked for me :)

[jrub]

yeah, I did, plus relaunching yarn start, just in case 😢