Layout issues with schema with long query names in 1.0.5

[simoncoggins]

I have been testing SpectaQL on 0.15.0 and recently switched to 1.0.5. I've noticed some new layout issues that weren't there prior to 1.0. Most have to do with our (admittedly overly long) query and type names:

• Logo missing (HTML markup is there - 'sidebar-top-container' appears to have zero height)
• Long query names no longer truncated with ellipsis
• Long query names in heading overlap into examples region
• JS scrolling causes navigation to scroll horizontally and cut off left side
• Similar issues on narrow screen sizes (mobile menu view)

I also noticed that resizing was very slow for a large schema such as ours (previously it was not like this, was fast on 0.15.0). It seems to be trying to calculate every intermediate state as you resize instead of only calculating for the most recently received width.

I've created a quick screencast to show the issues (using spectaql theme but happens in default too):

https://youtu.be/4GcvVBGsTkk

[newhouse]

Thanks @simoncoggins for all the things you found and issues you've filed!

I've fixed most of them today, and we're working on this ticket here still/now.

1 question: I'm not sure what you're pointing out about the Logo missing part? Logo specification appears to be working properly through both the CLI and YAML patterns. Are you saying you've specified the logo, but it's just not showing up? Or that you've not specified it, and you're wondering why that sidebar-top-container is still present? (hint: it's for mobile viewing).

Just not sure what you're trying to tell me is on that one...

[simoncoggins]

I've specified the logo in my config.yml but it's not being displayed. It used to show up in 0.15.0 but isn't appearing any more. When I look at the HTML/CSS the 'sidebar-top-container' div, 'logo' div and img tag are all there in code but the height of the elements seems to be zero which seems to be why they aren't visible.

[newhouse]

Should all be fixed in 1.0.9...can you try @simoncoggins ?

[simoncoggins]

Tested in 1.0.9 with both default and spectaql themes and can confirm:

• Logo is showing again
• Long names in navigation are truncated
• Long names in headings are truncated in spectaql theme and fit fine in default theme (don't overlap with examples)
• Truncation has fixed JS scrolling navigation issues
• Looks fine on mobile

Resize performance is definitely better due to debounce changes, it still takes a few secs to finish resizing with our large schema but much better than previously.

The only remaining issue from our perspective is that in the spectaql theme, truncation means there is no way to see the full query/mutation/type name at all. Previously the nav was truncated but the headings were wrapped so it was possible to see the full name even if it didn't look super great.

It's not a big deal for us though as we can just override CSS or templates. Some ideas on what we might do:

• Revert back to wrapping the headings
• Add a title attribute into the nav and headings element so the full name is shown on hover
• Implement a little CSS or JS tooltip that shows on hover, displaying the full title on top of other elements only during hover.