search

Greater-London-Authority / ldn-viz-tools

https://greater-london-authority.github.io/ldn-viz-tools/
1 stars 0 forks source link

AppShell does not allow fullscreen apps when Header and/or Footer is used #368

Open PaulioRandall opened 1 week ago

PaulioRandall commented 1 week ago

Describe the bug

<AppShell> has the class min-h-dvh which causes a fullscreen application, such as a map, to overflow at the bottom when a header and/or footer is used. It causes the footer slot and part of the main slot to be hidden.

To Reproduce Steps to reproduce the behavior:

  1. Create an app with the following (Map, Header, & Footer are arbitrary):
<Header />
<AppShell>
    <Map slot="main">
</AppShell>
<Footer />

Expected behavior

The map should fit to the screen and not overflow at the bottom.

Potential solutions

  1. Add a property to <AppShell> to specify that this is a fullscreen application which should not overflow or scroll vertically or horizontally, e.g. type="fullscreen" and type="dashboard" or perhaps just a flag: <AppShell fullscreen>.
  2. Add header and footer slots to <MapShell> so their size is taken into account.