"Guides" menu overflow on small screen

[j4kim]

I've recoreded a little video that shows the issue better than words: https://drive.google.com/file/d/1m0EFTjuE3_6CMyX-lPLFbulGgXalqE-q/view?usp=share_link

[netlify[bot]]

✅ Deploy Preview for solid-docs ready!

Name	Link
🔨 Latest commit	9ee89e59ae2cdd2e2325f469160cdc2f17eccec4
🔍 Latest deploy log	https://app.netlify.com/sites/solid-docs/deploys/642324747b3bc000084c77a1
😎 Deploy Preview	https://deploy-preview-241--solid-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[Ehsan-Home]

Hi. I found the source code generating the subnavs:

index.tsx, line 221:

<div
           ref={subnavEl}
            onmouseenter={closeSubnav.clear}
            onmouseleave={closeSubnav}
            class="absolute left-50 bg-gray-200 dark:bg-solid-darkLighterBg shadow-2xl max-w-sm transition duration-750"
            style={{ left: `${screen.width > 768 ? subnavPosition() : 0}px` }}
          >
            <ul class="divide-x divide-transparent flex flex-col">
              <For each={subnav()}>
                {(link) => (
                  <li
                    class="px-5 hover:bg-solid-default hover:text-white transition duration-300"
                    style={
                      link.direction && {
                        direction: link.direction,
                        'text-align': link.direction === 'ltr' ? 'left' : 'right',
                      }
                    }
                  >
                    <NavLink
                      onClick={() => setSubnav([])}
                      class="px-6 py-5 w-full block"
                      href={link.path}
                    >
                      {link.title}
                      <Show when={link.description}>
                        <span class="block text-sm text-gray-400">{link.description}</span>
                      </Show>
                    </NavLink>
                  </li>
                )}
              </For>
            </ul>
          </div>

It looks like the div inside the code snippet is not scrolling or getting confused when page behind scrolls.

I also tried adding overflow-y:auto to the div but didn't work.

[edemaine]

I believe this issue should be raised on the solid-site repo, https://github.com/solidjs/solid-site