Sidebar Issues

[tsressin]

After testing the new sidebar, I came across a couple issues. Both are visible in the screen capture.

1. The font of list items is different for those items that have children vs those that do not.
2. For longer lists, some of the items get hidden under the header.

[krowvin]

@tsressin I was trying to make it so the menu will have a scrollbar if it exceeds a height of more than 50 % of the view port height.

While this works it breaks future popouts. This is due to them being crammed in the same <div> as the rest of the elements.

I looked up if the library itself supported this out of the box and it seems even the developers of tailwind/headlessui are having fun figuring it out (no solution yet)

tailwindlabs/headlessui#669

But we are close - just need to figure out this large menu issue.

@willbreitkreutz if you wouldn't mind - do you have any ideas on how to solve this? I tried to set the future popout menus to fixed but I may just have to manually create the 3 levels of menu so that we can control where those popouts exist and where the "scroll-auto" is placed.

EDIT:

You can see the scrollbar at the bottom and you can see the blue box where the popout should be but is contained hidden in that scroll

[krowvin]

@tsressin Can you provide an example where you saw your different fonts? I'm not seeing them on my end - i'm wondering if theres some style overrides happening in what you are seeing

I.e. inspect your page and find the two "font-family" styles that are different in the sidebar/popout menu

[tsressin]

@krowvin If I am interpreting this correctly, when there are no children, it is using large text and when there are children, it is using small text. I don't see anything in my code that specifies one or the other (I guess there could be something I am missing).

Without children
<div class="gw-pl-1 gw-text-lg gw-font-bold gw-py-1 gw-flex gw-justify-between gw-items-center gw-cursor-pointer hover:gw-bg-gray-100 ">Basin Map

With children
<button class="gw-inline-flex gw-w-full gw-items-center gw-justify-between gw-text-sm gw-leading-6 gw-ps-1 focus:gw-outline-none" type="button" aria-expanded="false" data-headlessui-state="" id="headlessui-popover-button-:rq:">Basin Summaries