Create/edit modal too big for even large mobile screens - and New Compact Modal Concept

[702573N]

The current modal (input form) to set/edit tasks is to big/large for my iPhone 14 Pro Max, which is the largest phone on the market. The 'X' close button is invisible and covered by input fields. The title bar is covered by the dynamic island (not visible in screenshot).

The modal should be fundamentally revised and made more compact. Separated code blocks under each input field take up unnecessary space. Here, a preview of the final task at the end of the modal would suffice. The label text can be set as placeholder inside the input fields to save space too. The field input help is too complex and only used by hardcore users who know what they are doing and how it works. This can be displayed as tooltip on each input field. The last two field "Status" and "Done on:" are also useless, because the status can't be changed by the checkbox. Furthermore this information status/done is visible before entering the modal, so there is no need to go into the modal to view information which I cannot change there. All this taken together results in a more compact modal.

[claremacrae]

Hi @702573N Thank you very much for the bug report, and suggestion for improvement.
It gives a good idea for ways forwards.

[Cito]

Maybe we can have two versions of the modal, one optimized for desktop and one for mobile?

[claremacrae]

Interesting. I hadn't thought of that.

[claremacrae]

This can be displayed as tooltip on each input field

Nice idea. How do iPhone users get tooltips to display. I can do that on iPad with the trackpad on the keyboard, but otherwise I think I have been unaware of tooltips on mobile devices. What am I missing?

The field input help is too complex and only used by hardcore users who know what they are doing and how it works.

I'm a bit confused by that statement. I would have thought that the hardcore users might already know what the help is saying, but for all others, the features described by the message are super useful time-savers.

I wouldn't want to remove them, although I would be happy if a way could be found to make them take less space, and they are only needed in on place.

Just a small thing, but in the new design, I would be keen for there to be some indication of which date field is which, once they all have values in. In the suggestion above, there's nothing to show which is which here:

[702573N]

All tasks users should be familiar with the icon set. So you could set the corresponding icon in front of each input field and the name as placeholder (as in the screenshot). Here is a screenshot from Evernotes task edit window. Perhaps this can inspire:

[claremacrae]

Ooooh that's nice. I really like that. Thanks!

[claremacrae]

I’m looking for easy -to-implement solutions to this for phone users.

@Cito do you know if it is possible to put a vertical scroll bar down the side of the modal, with the save/accept/close row outside the scroll bar and always visible.

[Cito]

Should be possible by putting the scrollable part into a separate div with "overflow: auto".

[aubreyz]

I must admit to being baffled by this whole thread. On my Android phone the modal is perfectly accessible and Scrolls up and down quite easily - so everything is already accessible. Having more than one field on a line is not going to work. In the very first screenshot in this thread does the modal not scroll up and down??

I agree that for a new user it may not be obvious that one needs to scroll to to get to the Apply button.

[Cito]

Can confirm on Android. Maybe the problem only exists on iPhones? Or OP used an older version of Obsidian/Tasks?

[claremacrae]

I must admit to being baffled by this whole thread. On my Android phone the modal is perfectly accessible and Scrolls up and down quite easily - so everything is already accessible.

Wow, thanks @aubreyz.

I tried it out on my iPhone 13 Pro Max - so a large screen phone but the dialog does not completely fit.

And when I tapped inside the modal, a scroll bar appeared and I could indeed scroll it up and down.

The scrollbar disappeared a second or two later - but definitely I could scroll.

[claremacrae]

I have logged the failure to show a scrollbar on iPhone devices in #1238. Let's move that bit of the conversation to there.

[claremacrae]

Thanks to @Cito, a new more compact Edit Task modal was just released in Tasks 1.17.0.
There is a screenshot in the release page:
https://github.com/obsidian-tasks-group/obsidian-tasks/releases/tag/1.17.0
It rearranges the Priority buttons in narrower windows.