Optimize interface for mobile

[janfaracik]

Overrides UI preferences when the viewport width is small (< 700px). Feel the graph is better for mobile users (e.g. larger hitboxes, gesture based, smaller).

Before

After

Should fix #698

Testing done

• Resize window and notice UI preferences are overriden
• In mobile you can no longer show/hide graph/stages

Submitter checklist

• Make sure you are opening from a topic/feature/bugfix branch (right side) and not your main branch!
• Ensure that the pull request title represents the desired changelog entry
• Please describe what you did
• Link to relevant issues in GitHub or Jira
• Link to relevant pull requests, esp. upstream and downstream changes
• Ensure you have provided tests - that demonstrates feature works or fixes the issue

[felipecrs]

@janfaracik you mentioned it should fix #698, but in my case, it was not anyhow mobile, it was a 1080p landscape monitor with certainly more than 700px. Do you still think it can be a fix?

[timja]

one thing to keep in mind here is that nested stages don't show in the graph so its not possible to navigate on mobile then. I wonder if it would be better to move the tree to the top in some way on mobile?

[janfaracik]

Definitely something to look into I think - still worth getting this in though as currently its a mess on lower resolutions.

[janfaracik]

@janfaracik you mentioned it should fix #698, but in my case, it was not anyhow mobile, it was a 1080p landscape monitor with certainly more than 700px. Do you still think it can be a fix?

Heya, it should. Tried on my MacBook and it's no longer going off the page -

Before

After