Layout of fullApp embed mode

Contribute Bug
,
1

Hi team!

When fullApp embed came out, I tried it on my site right away. I had to fix a few layout things, so I want to share them. Maybe they are useful to you.

I found 4 problems:

  1. Blank space on the left. With narrow text (about 700px), the embed looked fine. But with wider content (900px or more), there was a blank area on the left.

  2. Blank space on the right. After I fixed #1, a blank area appeared on the right.

  3. Too tall, blank space below. By default, the embed height matches the content above it. With long content, there was a big empty area below the comments — sometimes 2–3 screens tall.

  4. 1px flicker. A colleague saw the comments section flicker up and down by 1px on Chrome on Ubuntu. (Not on Mac.) One more CSS rule fixed it.

In the end, this snippet fixed everything:

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

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

I applied it to the Default theme.

Do you think these could be fixed directly in Discourse?

Happy to share full HTML to reproduce the issue.

Thank you!