<po-menu>: Erro com PageDefault quando passa de 1200px

[lucas-pollus]

Passos para reproduzir:

1. Acesse o projeto no: Stackblitz

Qual o comportamento atual?

Ao utilizar o menu, toolbar e page-default quando a tela é maior que 1200px, há um problema na renderização dos componentes na parte debaixo da tela. Eles não são apresentados corretamente.

Segue alguns prints, demonstrando o problema:

Quando a tela é superior a 1200px

Quando a tela é inferior a 1200px

Que comportamento você esperava ver?

Ambiente

• PO UI:
• Angular:
• Browser(s):
  • Chrome
  • Firefox
  • Edge
  • Safari
  • IE 11
  • Outros
• Operating System:
  • Windows
  • macOS
  • Ubuntu
  • Outros

[anabye]

Boa noite @lucas-pollus
Espero que esteja bem.

Obrigada por reportar o cenário, realmente a classe .po-wrapper não está realizando o cálculo correto quando há um gap entre o header e o content. Vou permanecer a issue em aberto para análise do time, Caso queira contribuir com uma possível solução, sinta-se à vontade para seguir nosso guia de contribuição.

Como alternativa temporária, sugiro remover o gap aplicado da seguinte forma:

.po-wrapper .po-page {
  gap: 0;
}

Segue seu exemplo atualizado:
StackBlitz

Assim que tivermos uma nova atualização relacionada a esse ponto, manteremos você informado.

Caso seja TOTVER, utilize o Jira para priorização na abertura de issues

Atenciosamente,
Time PO-UI

[lucas-pollus]

Bom dia, legal, obrigado pelo retorno.

Realmente o gap não está sendo considerado no cálculo. Vou fazer um ajuste aqui e faço o PR para vocês analisarem:

recalculateHeaderSize() {
    setTimeout(() => {
      const pageHeaderElement: HTMLElement = document.querySelector('div.po-page-header');

      this.setHeightContent(pageHeaderElement);
      this.contentOpacity = 1;
    });
  }

  setHeightContent(poPageHeader: HTMLElement) {
    const bodyHeight = document.body.clientHeight;
    const pageHeaderHeight = poPageHeader ? poPageHeader.offsetTop + poPageHeader.offsetHeight : 0;
    const newHeight = bodyHeight - pageHeaderHeight;

    this.height = `${newHeight}px`;
  }

Lucas Almeida

[anabye]

Boa tarde @lucas-pollus

Obrigada pelo retorno.
Sua PR será avaliada pelo time junto da Product Qwner, caso esteja conforme, a PR será mergeada e publicada.
Se forem identificados ajustes ou quebras no código, a equipe entrará em contato solicitando as correções necessárias.

Atenciosamente,
Time PO-UI