Use case or problem
This is a small but annoying UI issue when using Obsidian on Android or iOS. The inconvenience surfaces when a mobile user tries to type something inside an overly-tall modal:
As clearly shown in the screenshots, the pop up keyboard blocks the input element, so users cannot see what they are typing without canceling the typing.
Although Obsidian itself doesn’t have such large modal, many plugins are using it, and their users suffer:
- Remotely Save
- Obsidian Tasks
- Lot of other plugin users experiencing this (but without reporting an issue)
Proposed solution
I think this could be as easy as tweaking a CSS variable. I inspected Obsidian styles for a mobile modal and found:
.modal {
max-height: var(--dialog-max-height);
}
.is-phone .modal-container {
--dialog-max-height: calc(100vh - var(--safe-area-inset-top));
}
I think changing --dialog-max-height to calc(100dvh - var(--safe-area-inset-top)) (notice the dvh) could address the issue immediately.
Current workaround
Plugin developers are often forced to tweak Obsidian default modal CSS, often awkwardly. I think this could better be done in native APP instead of delegating to plugin developers. Since this will address similar problems in all plugins, and is future-proof if Obsidian the App itself adds a large modal that requires text input in the future.