SSR: QPageContainer misses footer padding when rendered before QFooter

[209]

Description

Incorrect layout order:

<q-layout ...>
    <q-header :heightHint="55" />
    <q-page-container>
      <router-view />
    </q-page-container>
    <q-footer :heightHint="103" />
</q-layout>

SSR result:

<div class="q-page-container" style="padding-top: 55px; ">

Correct layout order

<q-layout ...>
    <q-header :heightHint="55" />
    <q-footer :heightHint="103" />
    <q-page-container>
      <router-view />
    </q-page-container>
</q-layout>

SSR result::

<div class="q-page-container" style="padding-top: 55px; padding-bottom: 103px;">

Root cause:
QHeader and QFooter write their sizes into $layout sequentially.
QPageContainer reads this data during its setup, assuming it has already been populated.

Header logic:

    $layout.instances.header = instance
    props.modelValue === true && updateLayout('size', size.value)
    updateLayout('space', props.modelValue)
    updateLayout('offset', offset.value)

Footer logic:

    $layout.instances.footer = instance
    props.modelValue === true && updateLayout('size', size.value)
    updateLayout('space', props.modelValue)
    updateLayout('offset', offset.value)

As a result, if QPageContainer is rendered before QFooter, the footer size is missing during SSR and padding-bottom is not applied.

Documentation Section URL

https://quasar.dev/layout-builder, https://quasar.dev/layout/layout

Flavour

None

Areas

Components (quasar)