Chatboxes no more visible on a mobile browser or on narrow desktop window

[deleolajide]

Describe the bug

When converse is shown in a mobile browser or in a narrow desktop window, it used t be possible in 4.2 and below to show the selected chatbox by hiding the control box. Now in 5.0.2, the chatbox is not visible as the control box remains visible.

Current behavior

Clicking on florence does not change the screen

Expected behavior

Clicking on florence changes the screen

Environment (please complete the following information):

• Desktop and Mobile
• Converse.js version [e.g. 5.0.1]

--- Want to back this issue? **[Post a bounty on it!](https://app.bountysource.com/issues/78947385-chatboxes-no-more-visible-on-a-mobile-browser-or-on-narrow-desktop-window?utm_campaign=plugin&utm_content=tracker%2F194169&utm_medium=issues&utm_source=github)** We accept bounties via [Bountysource](https://app.bountysource.com/?utm_campaign=plugin&utm_content=tracker%2F194169&utm_medium=issues&utm_source=github).

[joudinet]

I experience the same issue on the embedded view:

Looking at the CSS, even though I'm far from an expert, I think there is something wrong with the rules related to the classes: controlbox and flyout box-flyout.

[joudinet]

Here is my workaround to this issue: Activate singleton option to show only one room in the embbeded view, and add the following CSS rules to fix the rendering on small screens:

@media screen and (max-width: 480px) {
    #page-content #conversejs .chatroom .box-flyout {
    height: 100% !important;
    }
}

@media screen and (max-width: 768px) {
    #conversejs .converse-chatboxes .chatbox .box-flyout {
    bottom: initial;
    margin-left: 0;
    }
}

This workaround is good enough for my use case but it is not good enough to close this ticket.

[deleolajide]

Looks like this issue is fixed in version 5.0.5. At least this workaround is no more needed

[joudinet]

I've just tested v5.0.5 and I still need to set the bottom property to initial and the margin-left to 0 on small screens. Did you try on small screen as well? For example by activating the Responsive Design Mode (Ctrl+Shift+M) on Firefox. Without this workaround, the singleton embedded view sets .chatbox.box-flyout margin-left to 15px and bottom to 0, which produces the incorrect positioning reported in https://github.com/conversejs/converse.js/issues/1683#issuecomment-524344500

[deleolajide]

Did you try on small screen as well?

This work-around actually stopped 5.0.5 from working for me in narrow window mode as the controlbox became invisible as soon as the screen narrowed. It took a bit of debugging before I narrowed it down to this change.

I have not however not yet tried it on my phone in PWA mode

[joudinet]

FYI, I've just tested on version 6.0.0 and the layout of the embedded view without singleton mode is still not usable on a mobile browser or on a narrow desktop window. The CSS workaround is still required for the embedded view with singleton mode.

[jcbrand]

@joudinet That's a different issue since you're using embedded view. Please make a new issue for it.