On mobile screen, can't interact with webpage content.

[Bykerbry]

The .rcw-widget-container has z-index: 9999 and is position: fixed. On mobile, it also has height: 100vh & width: 100%. This seems problematic because even while the widget is closed, the .rcw-widget-container is sitting on top of the entire viewport, and users are unable to interact with the site at all (except for the widget itself).

On Desktop, this is not as significant a problem, but the problem persists. The website can not be interacted with next to the chat widget (about a 300px x 70px block).

Steps to reproduce

1. Create a react app
2. Add & import react-chat-widget into App Component
3. Add any input to the App Component along with Widget component
4. npm start
5. Screen below 801px in width
6. Try clicking the button/input

import React from 'react';
import { Widget } from 'react-chat-widget'
import './App.css';
import 'react-chat-widget/lib/styles.css';

function App() {
  const handleNewUserMessage = (message) => {
    console.log(message)
  }  

  const cantBeClicked = () => {
    // This function will never run
  }

  return (
    <div className="App">
      <button onClick={cantBeClicked}>Can't Click</button> 
      <Widget 
        handleNewUserMessage={handleNewUserMessage} 
      />
    </div>
  );
}

export default App;

On mobile, no elements on the webpage can be interacted with except the widget itself.

On desktop, any elements that fall within this proximity to the launcher can not be interacted with:

Note:

Even if removing the z-index: 9999, the .rcw-widget-container is still position: fixed & occupies more space than the launcher, and therefore, anything that falls behind the container is not able to be interacted with.

Can the .rcw-widget-conatiner only take the space of the launcher when closed?

[Bykerbry]

I have not figured out a way to resolve this issue, unfortunately.

[powerfulsheron]

Not a solution but a not so perfect workaround :

@media only screen and (max-width: 800px) {
    .rcw-widget-container {
        height: fit-content;
    }
    .rcw-conversation-container .rcw-title {
        padding: 15px 0 15px;
    }

    .rcw-conversation-container{
        height: 0%;
    }

    .rcw-conversation-container.active{
        height: 100vh;
    }
}

I've added a media query for screens under 800px, the height of the widget container is set to fit content, and the conversation container, when not active, has a null height. When the conversation container get the active classe the height changes to full screen height and makes the widget container bigger.

There is still a problem left, if your page has a scroll, it keep the scroll under the widget, but you can still scroll inside the widget to see the messages

It could be cool if we could have an active class on the widget container, or onclick triggers on widget button click

[paulomcnally]

This work for me.

@media only screen and (max-width: 800px) {
  .rcw-widget-container {
    position: absolute;
    top: 100px;
  }

  .rcw-conversation-container.active{
      height: calc(100vh - 100px);
  }
}

[cjcole8]

Still having the issue, but powerfulsheron's solution worked to fix it (paulomcnally's did not)