search

Gerben321 / bike-care-tracker

Issue/Suggestion tracker for Bike Care app
3 stars 0 forks source link

Content beyond 100% of width on some pages in mobile view #53

Closed Konstantin-Levin closed 2 months ago

Konstantin-Levin commented 2 months ago

Describe the bug I have found 2 pages on mobile where the content is displayed beyond 100% of the screen. These are: Service Logs and the usage page from any component (see videos)

Can this be handled by splitting the longer line of text onto a new line. Or maybe use ellipsis (...)

https://github.com/Gerben321/bike-care-tracker/assets/155573822/b3a5b502-42b5-41f9-be1a-74cdf92435f0

Lots of information to display on a small screen here - maybe list the data vertically rather than horizontally? Probably hard to implement without messing other things up though I imagine...

https://github.com/Gerben321/bike-care-tracker/assets/155573822/f1e47325-2b2f-4649-8dc3-e5a30c86e9f7

Expected behavior All other pages I've tried display correctly at 100% of visible screen and are able to handle long lines of text

Smartphone (please complete the following information): iphone 13 mini Safari

Thanks

Gerben321 commented 2 months ago

I'm aware of this but haven't found a nice solution yet. I've removed a lot of data on other tables but it's hard to remove more here. I'll have another think about it for sure.

Gerben321 commented 2 months ago

I just noticed with the latest release from today that a little bug has appeared. This means all tables on mobile show all columns again. But I think I've found a nice way to make them friendlier for mobile use. Stay tuned.

Gerben321 commented 2 months ago

This is what I've come up with so far: image The columns are hidden when there's no more space. I've given some priority to a few columns to show the most important first. When you click the arrow it folds down and you get to see all columns. It only is a little difficult to click right now because the first column is also the link to the thing in the table... Have to find a good solution for that still.

Gerben321 commented 2 months ago

Same goes for the other page. Default view: image Folded out: image

Let me know what you think about this solution. Think in terms of design and interaction there's a few steps to make still, but it's a start for sure.

Konstantin-Levin commented 2 months ago

Looks like a good solution 👏

Still the issue with the longer titles extending past the width of the screen.

https://github.com/Gerben321/bike-care-tracker/assets/155573822/31f8d2ec-d498-49e4-bced-3e944e1f92eb

Gerben321 commented 2 months ago

Ah yeah I was hoping this would be enough. I'll also cut of the text then. Also started using some better (IMO) icons for the dropdowns. I'll let you know when this is fixed.

Edit: should be live now.