Providers::Dimension

A provider component that helps you to make a container fill the remaining space of the viewport. Usually, you would use flexbox to do so but for scenarios where this isn't possible you can use this component to make it easy to take up the remaining space.

hbs

<Providers::Dimension as |p|>
  <div style={{p.data.fillRemainingHeightStyle}}>
    Fill remaining space
  </div>
</Providers::Dimension>

By default, this component will take up the remaining viewport space by taking the top of itself as the top-boundary and the #contentinfo as the bottom-boundary. In terms of Consul-UI this means take up the entire space but stop at the footer that holds the consul version info at the bottom of the screen.

You can pass a different bottomBoundary if need be:

hbs

<div class='h-48 relative flex border border-hds-consul-foreground'>
  <div class='h-full w-24 relative'>
    <div
      class='absolute bottom-0 w-full h-12 bg-hds-consul-gradient-primary-start flex items-center justify-center'
      id='bottom-boundary'
    >
      Boundary
    </div>
  </div>
  <div class='flex-1'>
    <Providers::Dimension @bottomBoundary='#bottom-boundary' as |p|>
      <div
        style={{p.data.fillRemainingHeightStyle}}
        class='bg-hds-consul-surface flex items-center justify-center'
      >
        We could use flexbox here instead
      </div>
    </Providers::Dimension>
  </div>
</div>