Scrolling of main page and custom sections offset

[addshore]

Hi again,

I'm having a few issues with scrolling in my usage of the explorer. All routes seem to scroll correctly when seelcted. However the custom "sections" and main page all scroll below the main heading, when it might be nice to scroll to the main heading.

Is there an easy way to change the scroll target for these pages?

https://github.com/Rhosys/openapi-explorer/assets/3308769/9b8d56cf-f1e4-4211-9350-860b8eb154fe

[wparad]

Hey, that just seems like a bug. We'd more than an accept a PR for this. To be honest I'm not sure where the bug is exactly, but we might need a custom scroll function to make sure the right thing is displayed. I'm guessing part of the problem is that the navbar might be hiding the actual display. But I don't want to swear to it.

[addshore]

Okay great, I had a look at some of the scroll functionality today but figured I'd best ask before digging too deep. I'll take another pass in the coming days / weeks and see what I can figure out!

[wparad]

No worries if you don't have time/can't figure out what is going on. But I assure you anything you find here will make creating a fix even easier/faster.

[wparad]

We actually just ran some tests here, and are unable to reproduce this problem. Can you put the link to your spec into our tester and see if it is broken there as well?

https://rhosys.github.io/openapi-explorer/

If so, would you be able to provide a minimum spec that reproduces this problem?

[addshore]

So, I have a feeling it's less about the spec, but more about the layout of the rest of the page, and custom slots used. The openapi explorer is the content on a page within a nextjs site using the nextra docs theme.

In essance, the page is just this:

And the component right now is something like the below

  return <openapi-explorer
      className = {styles.oapi}
      spec-url = {specUrl}
      server-url = {serverUrl}
      collapse = {true}
      hide-server-selection = {true}
      hide-schema-selection = {true}
      >
    <div slot="nav-section" className = {styles.customSectionBar}>Filtering</div>
    <div slot="custom-section" className = {styles.customSection}>
      <OApiFiltering/>
    </div>
    <div slot="operations-header">
      <div className="nav-bar-section-title">Endpoints</div>
      <hr/>
    </div>
    <div slot="overview">
      <OApiOverview/>
    </div>
    <div slot="overview-api-description"></div>
    <div slot="authentication">
      <OApiAuthentication handleAuthTokenChange={handleAuthTokenChange}/>
    </div>
    {/* <div slot="post-/users/login">
      <div>Special content for just one route</div>
    </div> */}
    </openapi-explorer>

You can see the preliminary site at https://docs-next.lightbug.io/ currently too (but I'm still working on ironing out various things)

As far as I can tell the scroll for the API routes seems to be correct? scrolling to the route heading?

Its the scrolling on non route pages that seems off a bit.

These pages currently look something like this

[wparad]

Okay, I've confirmed the problem is with your page. The issue is pretty simple, the doesn't know where the top of your page is. It assumes the top of the is at the top of the component. But you have a nav bar that is covering the top of the component.

If you checkout our implementation: https://authress.io/app/#/api?route=get-/v1/groups you can see that the navbar is above the component, and the component itself is scrollable. However with your implementation, you've put the navbar and the component on different layers, so the browser doesn't know that the scrolled component won't be visible.

Our recommendation would be to have both of these components within the same parent div, and not have the navbar floating above the scrollable content. A simple alternative would be to add a placeholder component above the openapi-explorer that has a height = to the navbar height.

If for some reason you aren't able to fix this display bug on your side, the alternative could be to change the scroll function to allow you to set a specific offset on scrolling.

So that being said, I will close this ticket for now, but we would be happy to support a customized offset, if you would be interested in authoring that pull request, but by default this work isn't going to get in otherwise.

I hope that makes sense.

---

For clarity on

As far as I can tell the scroll for the API routes seems to be correct? scrolling to the route heading?

No that isn't working either, the scroll is supposed to be to the top of the component, but it turns out that the top part is just hidden by the navbar. It just looks like it worked because the text you clicked on matched, but the there is no scroll to that particular text, it actually scrolls to the top.