Glimmer post stream issue with embedded replies

[Don]

Hello

It seems some style are dropping on parent post when I open the embedded reply on glimmer post stream (mobile).

Thanks

[Ethsim2 (Ethan)]

oh, i see the username becomes closer to the post body, of the post you’ve expanded what it’s replying to

[chapoi]

I’ll be honest, I have trouble seeing the issue on the video (it’s quite blurry for me).

Could you upload some screenshots to clarify the issue?

[Don]

I think the issue is when the embedded reply expanded then it refresh the classes and for example it affects the
post__regular regular post__contents contents div classes. When the embedded reply opens this div will be post__regular regular

But the CSS is target the .contents class here. So this won’t be available when the embedded replies opened.

.mobile-view .boxed .contents {
  padding: 10px 0 0 0;
}

I think there should be more missed classes here…because it shouldn’t affect the parent post style.

[chapoi]

I’m sorry, I still don’t understand it. I don’t see anything wrong with the screenshot?

[Don]

When you open a reply it’s change the parent post style. That’s the issue.

Originally the post is in full width and has some padding etc… It can also affects the custom modifications on posts. Before glimmer post stream it didn’t do any modification with the parent post, just opened the replies.

[chapoi]

Oooh I see now, thanks for bearing with me!

That does seem like a little regresh, I’ll take a look – thanks!

[Don]

Hello

Here is a quick fix (if anyone needed) with targeting the .post__regular class instead of .contents because the .contents is removes when the embedded replies opened.

@use "lib/viewport";

.topic-post {
  .boxed {
    .post__regular:not(.contents) {
      position: relative;
      clear: both;
    }
  }
}

.mobile-view {
  body:not(.archetype-private_message) {
    .boxed {
      .post__regular:not(.contents) {
        padding: 10px 0 0 0;
      }
    }
  }
}

// PM

.archetype-private_message {
  .post__regular:not(.contents) {
    border-radius: var(--d-border-radius);
    border: 1px solid var(--content-border-color);
    padding-top: 10px;
    padding-left: var(--pm-padding);
    margin-left: calc(var(--pm-padding) * -1);
    
    @include viewport.until(sm) {
      margin-left: 0;
      padding: 1.5em 1em 0;
    }
  }
}

[saquetim (Sérgio Saquetim)]

This issue will be addressed by

https://github.com/discourse/discourse/pull/34468