CSS issue on responsive fullscreen mode

[shye0000]

Hi, as you can see in the following screen shot, in the responsive fullscreen mode, the .widget-container always has height: 100% width: 100% and z-index: 9999 , all other elements in my page are beneath this widget-containe layer, so nothing accessible in this mode.

Thanks in advance for your help.

[mcallegari10]

Hello! Well, that's the idea of the full screen, the chat becomes full screen so it's the only thing the user we'll see and interact with. If you need to change it, you can override those classes via CSS/SCSS 😁

[shye0000]

@mcallegari10 Thanks for your reply, but maybe I didn't asked my question clearly. I agree with you about the full screen style when the chat window is opened, but the issue here is even its closed the container always takes 100% size of the screen and that makes all other elements in my app inaccessible. I dont think this is what we want, right ? 😄

[shye0000]

@mcallegari10
Here are some screen shots for better showing want I meant:
(I add background: steelblue to .widget-container)

Actually this issue also exists in big screen mode:

In mobile screen mode:

[mcallegari10]

Oh, OK, that's definitely not what we want 😱 . I'll get that fixed, thanks for the heads up! 😄

[shye0000]

@mcallegari10 I use this quick fix for the moment.

.widget-container {
  height: auto;
  width: auto;
  .conversation-container {
    width: 370px;
    margin-bottom: 10px;
  }
  .launcher {
    margin-top: 0;
  }
  @media screen and (max-width: 800px) {
    height: auto;
    width: auto;
    .conversation-container {
      height: 100vh;
      width: 100vw;
      margin-bottom: 0;
    }
  }
}

[servoice]

Just ran into this issue where the widget blocked the page on a smaller screen size. Changing .widget-container in the solution above to .rcw-widget-container fixed the the issue.