[Tooling] Dev UI doesn't work well on small screens
From a report of a user in IDX:
Genkit UI doesn't work well on small screens like a 15" macbook laptop. Scrolling was hit or miss and therefore I missed critical UI elements like the results textbox.
We should make sure the UI is usable or has other affordances to work on reasonable laptop screens (mobile-size screens is probably not a high priority but maybe someday...).
There are two issues here:
- Generally, the DevUI doesn't scale down well to smaller widths
- When embedded in VCCode the DevUI's fonts / ems are larger than the surrounding code, making it take even more space than if you were doing local dev in Chrome.
I'd prioritize 2 first, 1 will take some design thinking through to make sure we have all the right cases covered
Ok, updating the investigation of these two
- Is/was an artifact of VSCode's zoom level. The preview pane inherits the zoom level of the overall VSCode window, and it's common for at least some devs to have a zoomed in setting and not realize it. It can be checked in VSCode
settings -> "window.zoomLevel". 0 is the default.
We're working on some re-designs to make the Developer UI easier to use in smaller windows. Stay tuned!
We're in a good place now post- nav revamp. Any small tweaks will be tracked in separate tickets.