[docs] Quick nav and base content styles

mui / base-ui

Base UI is an open-source library of accessible, unstyled UI components for React.

MIT License

291 stars 47 forks source link

[docs] Quick nav and base content styles #804

Closed vladmoroz closed 3 weeks ago

vladmoroz commented 3 weeks ago

See

mui-bot commented 3 weeks ago

Netlify deploy preview

https://deploy-preview-804--base-ui.netlify.app/

Generated by :no_entry_sign: dangerJS against aa95a8133dc97f6bd6a67ac5337d2b15466fda0e

vladmoroz commented 3 weeks ago

@atomiks @michaldudak do you want me to wait for your reviews before I merge? There's some thick logic going on here and there. I feel confident about it, but wouldn't mind an extra pair of eyes if you plan to take a look.

colmtuite commented 3 weeks ago

Bug discovered, not sure how to recreate or what is causing it.

https://github.com/user-attachments/assets/ef9b3071-9477-4561-aeed-5bb6cbafb22b https://github.com/user-attachments/assets/f2f9f258-5eb2-4c58-8ed7-ca629899f733

colmtuite commented 3 weeks ago

Strange white flash bug in top right corner of the viewport when I scroll up quickly. Probably just a Chrome issue because it's a long document. UFO?

https://github.com/user-attachments/assets/21e7e39c-42ed-45eb-9b1d-6346489acc35

vladmoroz commented 3 weeks ago

Strange white flash bug in top right corner of the viewport when I scroll up quickly. Probably just a Chrome issue because it's a long document. UFO?

Yeah I'm seeing this too, it's not related to quick nav. Same for me when quick nav is not rendered at all:

https://github.com/user-attachments/assets/4f94d2e2-74ea-480f-95dc-77071c12cb9a

Nothing in the profiler either. I had spent some time trying to figure this one out yesterday but gave up. Anyone have ideas?

Bug discovered, not sure how to recreate or what is causing it.

https://github.com/user-attachments/assets/ef9b3071-9477-4561-aeed-5bb6cbafb22b https://github.com/user-attachments/assets/f2f9f258-5eb2-4c58-8ed7-ca629899f733

These are legitimate bugs, need help getting into this state though

atomiks commented 3 weeks ago

Twitter's right sidebar uses position: sticky and pins to top: -{value}px when scrolling down or bottom: -{value}px when scrolling up, which should replicate this effect?

I can't see the white flash on my end however

vladmoroz commented 3 weeks ago

Twitter's right sidebar uses position: sticky and pins to top: -{value}px when scrolling down or bottom: -{value}px when scrolling up, which should replicate this effect?

I can't see the white flash on my end however

Yep this is similar and the only similar experience I ever saw

We have different layout constraints here so the way it's done is somewhat different / more complete too