Increase the mobile cut-off width to 768 px

Fixes #3689

CHANGES.md

@@ -4,6 +4,7 @@
 
 - #3672: Images not rendering
 - #3676: Flyout box is not positioned correctly on mobile devices in "overlayed" mode
+- #3689: Chat view not accesible for certain widths in "fullscreen" mode
 - Remove modal from the DOM when it's closed
 - Fix login form style for `classic` theme
 - Fix css for the `headlines` feed

src/plugins/chatview/styles/index.scss

@@ -184,7 +184,7 @@
 }
 
 
-@include media-breakpoint-down(sm) {
+@include media-breakpoint-down(md) {
     .conversejs {
         converse-chats:not(.converse-embedded)  {
             > .row {

src/plugins/controlbox/styles/_controlbox.scss

@@ -301,7 +301,7 @@
     }
 }
 
-@include media-breakpoint-down(sm) {
+@include media-breakpoint-down(md) {
     .conversejs {
         &.converse-fullscreen,
         &.converse-overlayed {

src/shared/constants.js

@@ -53,4 +53,4 @@ export const PRETTY_CHAT_STATUS = {
 
 // The width in pixels below which we're considered on a mobile device and
 // above a desktop device.
-export const MOBILE_CUTOFF = 576;
+export const MOBILE_CUTOFF = 768;

src/types/shared/constants.d.ts

@@ -8,7 +8,7 @@ export namespace PRETTY_CHAT_STATUS {
     let chat: any;
     let online: any;
 }
-export const MOBILE_CUTOFF: 576;
+export const MOBILE_CUTOFF: 768;
 export type PrettyChatStatus = {
     offline: string;
     unavailable: string;
@@ -18,4 +18,4 @@ export type PrettyChatStatus = {
     chatty: string;
     online: string;
 };
-//# sourceMappingURL=constants.d.ts.map
+//# sourceMappingURL=constants.d.ts.map