getodk / central-frontend

Vue.js based frontend for ODK Central

Home Page:https://docs.getodk.org/central-intro/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Set minimum width

matthew-white opened this issue · comments

We know that Frontend doesn't work particularly well on mobile (#271). We've decided not to prioritize the mobile experience, but we could prevent unexpected behavior on mobile by setting a minimum width for Frontend. That would prevent overlapping elements or content overflow, for example. By setting a minimum width, the user would need to scroll horizontally on mobile to see content on the righthand side of the page.

@issa-tseng designs for a width of 1000px, so we could use that for the minimum width.

@lognaturel says that even today on mobile, things don't generally break. Typically the user is looking for something on the lefthand side of the page. However, we think that setting a minimum width would be an improvement.

After we set a minimum width, we will have bounds on the width on both ends: #447 was about setting a maximum width. (The minimum width will likely be set on a different element from the maximum width, but this is just to say that the width of most Frontend content will end up becoming fully bounded.)

Right now, there shouldn't ever be a horizontal scrollbar on the page as a whole. However, in #894, I observed that when the entity conflict summary table had a horizontal scrollbar, the page also had a scrollbar. I'm really not sure why that is. I didn't see any overflow from the conflict summary table or the conflict summary box that would cause the page to need a scrollbar. I tried a few things, but I wasn't able to prevent the scrollbar from appearing, so I hid it entirely. However, we will need to show it again once we address this issue. At that time, I think we should take another look at the conflict summary table and try to figure out why there was a scrollbar on the page.