Identified UX/UI problems for use on mobile device

Issue

Server Setup Information:

• Did you test in newest Wekan?: yes
• Wekan version: 1.11
• If this is about old version of Wekan, what upgrade problem you have?:
• Operating System:
• Deployment Method(snap/docker/sandstorm/mongodb bundle/source): docker
• Http frontend if any (Caddy, Nginx, Apache, see config examples from Wekan GitHub wiki first):
• Node Version: v8.11.1
• MongoDB Version: 3.2.20
• ROOT_URL environment variable http(s)😕/(subdomain).example.com(/suburl):

Problem description:

• REQUIRED: Add recorded animated gif about how it works currently, and screenshot mockups how it should work
• Explain steps how to reproduce
• Attach log files in .zip file)

1. header.styl

margin: -10px

caused horizontal scroll, should be:

margin: -10px 0 -10px -10px

1. jquery.ui.draggable cased touch/click event blocking/not responding, no resolution other than handling touch event separately.

2. perfect-scrollbar cased touch/scroll event blocking/not responding, upgrade to latest version v1.4.0 should solve the problem.

I would suggest switch to React as frontend, though.

I have some nasty fixes for my own version of Wekan that barely works, but should not be considered proper fixes.

[xet7]

@Haocen

Thanks! All improvements to Wekan are very welcome.

[Haocen]

Hi, I can contribute a little React if needed.

The hotfix commit can be found here: https://github.com/Haocen/wekan/commit/43d86d7d5d3f3b34b0500f6d5d3afe7bd86b0060

Most of them are introduced by outdated package/design.