Mobile view issues

[RaXorX]

This repository's issues are reserved for feature requests and bug reports.

• I'm submitting a ...

  • [√ ] bug report
  • [ ] feature request
  • [ ] support request => Please do not submit support request here, see note at the top of this template.

• Do you want to request a feature or report a bug? But report

• What is the current behavior? There're some visual issues with the site when viewed on mobile.

• If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://plnkr.co or similar (you can use this template as a starting point: http://plnkr.co/edit/tpl:AvJOMERrnz94ekVua0u5). Open the site on a mobile. Sign in Wait for a couple seconds and refresh Page. Or change any settings from the settings button and save. After a couple seconds they will just disappear.

Another issue is once you enable force zoom in accessibility menu, over in any chromium based browser. When it's enabled there is a weird column and sort of a footer at the right side and bottom of the editor.

• What is the expected behavior? Menu bar shouldn't disappear and no extra columns should be visible.

• What is the motivation / use case for changing the behavior? The site could be easily used on mobiles too, for people who are on the go or for any other various reasons can't use their desktops/laptops to write.

• Please tell us about your environment:

  • Version: 1.0
  • Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ] Mobile Chrome (Vivaldi Snapshot 3.5.2107.3
  • Language: [all | TypeScript X.X | ES6/7 | ES5 | Dart]

• Other information (e.g. detailed explanation, stacktraces, related issues

[Ezra]

On my mobile device (Android 9 on Razer Phone 2; testing in Firefox Daylight 96.2.0 and in Chrome 97.0.4692.98) this seriously inhibits use of the site. I hope this can be sorted out with some simple CSS adjustments; that'll make InkleWriter usable on a whole new range of devices.

Some of the bigger specifics I've noticed:

• In the navbar at the top, the right-side options are visible only in landscape mode.
• When logged in and editing my own story (not the tutorial), the right-side options are gone in landscape mode too, meaning the Contents cannot be opened.
• In Firefox but not Chrome, the left toolbar covers the start of every line of body text, making it difficult to read the story.

Would it make more sense to cover all of those under this one bug report (as a sort of user story about mobile use), or in separate bug reports (each concrete and testable)?