[bug] Can't scroll device horizontally without opening home assistant tab

[crxporter]

Before submitting a bug please read: https://zwave-js.github.io/zwavejs2mqtt/#/troubleshooting/bug_report

Version

Build/Run method

• [ ] Docker
• [ ] PKG
• [x] Manually built (git clone - npm install - npm run build )

zwavejs2mqtt version: 1.0.1 zwavejs version: 6.1.0

Describe the bug

When using using mobile, the configure screen on multi-column devices always scrolls to the "Home Assistant" tab instead of allowing to scroll over to the columns to the right.

To Reproduce

Steps to reproduce the behavior:

Screenshot will be attached, I have a Multisensor 6 which has a lot of config options. I'm unable to get to the right 2 columns.

Expected behavior

I would like access to these config items when using safari on iPhone.

Additional context

Downloaded and built from GitHub about 24 hours ago. Running on a raspberry pi 4. Using safari on iPhone 11 Pro.

[robertsLando]

@crxporter Could you send me a screenshot of the problem from your mobile? The screenshot attached isn't showing any bug

cc @ahochsteger

[crxporter]

Sure, the screenshot was to show that there are indeed columns to the right.

Here's what the experience looks like on mobile. Instead of getting columns on the right, the screen flashes a bit and I end up at "Home Assistant" tab.

[crxporter]

It might be really cool if the config fields would stack into a single column and fit to the width of the screen in this case. Then the "send" arrow button would be on screen and no horizontal scrolling would be needed.

[robertsLando]

@crxporter It was supposed to work in that way but some of latest UI changes have break this. WIll fix ASAP. Thanks for reporting

[ahochsteger]

@crxporter I've created a PR to disable touch support for <v-tabs-items> that triggers a swipe of the tabs and hinders horizontal scrolling: https://github.com/zwave-js/zwavejs2mqtt/pull/414 Would you be able to test this PR and confirm if it solves the issue for you? cc @robertsLando

[ahochsteger]

@crxporter the PR #414 is obsolete now since it was just a workaround. @robertsLando is working on a real fix in PR #413.

[robertsLando]

@ahochsteger Could you give that a try?

[ahochsteger]

@robertsLando looks much better. When I simulate a IPhone X (same applies to a Pixel 2) in the Chrome developer tools there still seem to be the problem that some controls (colapse icon, selection checkbox) are not visible without scrolling even though there should be enough space available: It seems that the <td> elements take more space than required. If I reduce them in the Chrome developer tools the label and data is visible in most cases.

[robertsLando]

Not so good yet

[matejdro]

This is still broken in 2.1.1:

[robertsLando]

@matejdro Try to hide some columns from the table, the bug will fix in this way

[matejdro]

It helps, but it is only a workaround, not a fix. What if I want to see all columns?

[robertsLando]

the problem is that if there are too much columns we can't show all the content and the table becomes scrollable causing this kind of issue. Even if we submit a fix to this the fix would be to hide some columns on lower screens sizes. Another fix woulud be to remove the expandable rows and put all the content in a window but with this you will loose the possibility to have more then one node props showing that is the reason why we introduced the expandable rows

[matejdro]

What if you disable scroll-to-swipe-through-tabs if width of the table exceeds width of the screen? I can still manually tap on Home Assistant tab to get there.

[ahochsteger]

@matejdro, @robertsLando the PR #878 should fix the annoying behavior by annotating <v-tabs-items> with touchless.