Webmail (mobile view): Buttons are laying about each other

[tonioo]

From @Gravity-87 on March 6, 2018 12:16

FIRST OF ALL:
Dear Modoboa-Specialists: Thx for this great project!! I installed Modoboa last weekend with the installer and now have a fully functional e-mail-server. It's a really big thing! :-)

---

My issue...

Impacted versions

• Modoboa: 1.10.3
• installer used: Yes
• Webserver: Nginx

Steps to reproduce

In the mobile view of the webmail interface on my smartphone (5,5"), there is the following problem:

• in the right mobile menu I click on "webmail" and get my inbox list (overview)
• on top of the list, you can see a search-field, a delete-button (red), a junk-button (orange) and a multi-choice-button for some more e-mail-actions.
• when I now use the left mobile menu to get the "New mail" button (green), this button lays BEHIND the search field, the delete- and the junk-button and is not really selectable
• It's reproducable on Android-Smartphone, with Opera- and Firefox-Browser.

Current behavior

As described

Expected behavior

It would be nice to have a really usable "New mail" button (green) in mobile view of the webmail interface.

Video/Screenshot link (optional)

Copied from original issue: modoboa/modoboa#1427

[seoni-at]

I used the following css to get the button working but the folder menu gets set to 0px by the javascript resize function

#leftcol {
  /* Bring the button to front and make background solid color */
  z-index: 101;
  background-color: #fff;
}
@media (max-width: 767px){ 
  /* Hides the popup as it is not displaying correct on mobile and is unusable*/
  #left-toolbar {
    display: none!important;
  }
}

[ciphermenial]

Another issue I have found is the data box for composing an email doesn't expand.

[shagho]

I used the following css to get the button working but the folder menu gets set to 0px by the javascript resize function

#leftcol {
  /* Bring the button to front and make background solid color */
  z-index: 101;
  background-color: #fff;
}
@media (max-width: 767px){ 
  /* Hides the popup as it is not displaying correct on mobile and is unusable*/
  #left-toolbar {
    display: none!important;
  }
}

for webmail.js replace

$("#folders").height(
                        $("#left-toolbar").offset().top - $("#folders").offset().top
  );

with below code:

const isMobile = window.matchMedia('(max-width: 768px)');

 if (isMobile.matches) {
       $("#folders").height(200); // Adjust height as needed
 } else {
       $("#folders").height(
                $("#left-toolbar").offset().top - $("#folders").offset().top
        );
}