Layout do modo de embed do fullApp

Contribuir Bug
,
1

Olá, equipe!

Quando o embed fullApp foi lançado, tentei rapidamente implementá-lo no meu site e precisei ajustar alguns detalhes do layout. Achei que seria interessante compartilhar aqui, talvez vocês também se interessem:

  1. quando o texto da página é estreito o suficiente (cerca de 700px), a largura do embed parecia correta, mas com conteúdo de aproximadamente 900px ou mais, havia uma área em branco à esquerda,

  2. ao corrigir isso, outra área em branco apareceu à direita,

  3. descobri que, por padrão, a altura da seção é a mesma da altura do conteúdo acima dela. Com conteúdo mais longo, surge outra área em branco abaixo da seção do embed, que pode ocupar de 2 a 3 telas,

  4. após corrigir os três problemas acima, um colega observou que a seção de comentários piscava 1px para cima/baixo no Ubuntu com Chrome (não observável no Mac) — outro CSS personalizado resolveu o problema.

No final, todos os problemas foram resolvidos com o trecho de código abaixo:

body.embed-mode #main-outlet-wrapper { 
  display: block !important;
}
body.embed-mode {
  --topic-body-width: 100%;
}

// altura
body.embed-mode .topic-post:first-child {
    display: none !important;
}
.post-stream--cloaked { min-height: 0 !important; }

… aplicado ao tema Padrão.

Ficarei feliz em fornecer o HTML completo para reproduzir o problema.

Obrigado!

1 curtida