Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

WebUI table column widths broken on narrow displays #5774

Closed
merlinuwe opened this issue Jun 10, 2019 · 15 comments

Comments

Projects
None yet
5 participants
@merlinuwe
Copy link

commented Jun 10, 2019

The interface is broken since the latest release
Start it and see it (reproducable)
Version Information

App Version: 1.1.4.1
Syncthing Version: v1.1.4
Android Version: Android 9
Device manufacturer: Honor

Screenshot_20190608_090240_com github catfriend1 syncthingandroid
Screenshot_20190608_090159_com github catfriend1 syncthingandroid
Screenshot_20190608_090230_com github catfriend1 syncthingandroid

I use syncthing-fork, catfried1 asked me to place this issue here.

@imsodin

This comment has been minimized.

Copy link
Member

commented Jun 10, 2019

I think the right thing to do below a certain display width is to display everything in one column, i.e. the data below the label instead of next to each other. Now some CSS/JS/HTML-knowledgeable person needs to figure out how to do that :)

@imsodin imsodin changed the title Webinterface is broken on my smartphone since last release WebUI table column widths broken on narrow displays Jun 10, 2019

@AudriusButkevicius

This comment has been minimized.

Copy link
Member

commented Jun 10, 2019

Not reproducible on my device. I guess it's just a device with very low screen reaolution?

@AudriusButkevicius

This comment has been minimized.

Copy link
Member

commented Jun 10, 2019

Actually. I am closing this. Android has a UI. Web UI is somewhat an escape hatch, but there is nothing we can do to accommodate these tiny screens I think. Perhaps it's zoomed in and try opening 127.0.0.1:8384 in normal phone browser and zoom out. Worst case this should be in a different repo as its android specific.

@merlinuwe

This comment has been minimized.

Copy link
Author

commented Jun 10, 2019

Here is the resolution:
the Honor 10 was the flagship of honor.

Display Type IPS LCD capacitive touchscreen, 16M colors
Size 5.84 inches, 85.1 cm2 (~79.9% screen-to-body ratio)
Resolution 1080 x 2280 pixels, 19:9 ratio (~432 ppi density)
@AudriusButkevicius

This comment has been minimized.

Copy link
Member

commented Jun 10, 2019

I suspect you are somehow zoomed in.

@calmh

This comment has been minimized.

Copy link
Member

commented Jun 10, 2019

There probably is some sort of zooming involved, or that browser is weird.

The problem is there, but at smaller point widths. Looking at something iPhone 5 sized (320x568, the smallest predefined actual device in my responsive testing thing), it's sort of crappy but not as bad as in the above:

Screen Shot 2019-06-10 at 20 23 16

Manually dragging things down to 250-260 pixels wide really makes things fall apart:

Screen Shot 2019-06-10 at 20 24 15

But at that point we're talking about so tiny screens that I'm not sure there is much to do.

@merlinuwe

This comment has been minimized.

Copy link
Author

commented Jun 10, 2019

I switched it back to normal. Now I see a little bit more of the letters. The problem occured with the latest release, even with everything set to "Normal" or "Standard".

grafik

@merlinuwe

This comment has been minimized.

Copy link
Author

commented Jun 10, 2019

grafik

The text of the devices appear ok.

grafik

@calmh

This comment has been minimized.

Copy link
Member

commented Jun 10, 2019

Yeah, there's two problems here. Or, well, three. One, the balance of column widths plus ellipsis overflow is Really Hard(tm) to get right in css. Two, there was some zoom going on. Three, German. There's no way to line break those headers in the left column. :/

There's been a lot of evolution to these column widths. We used to hard code 50/50. Latest release allows the right column to be wider than the left, at the price of letting the left column decide the minimum. Which doesn't play well with Dateiübertragungsreihenfolge on that phone.

On my similar-sized phone it's acceptable, it looks like it by default uses a somewhat smaller font size as well;

IMG_4899

@calmh

This comment has been minimized.

Copy link
Member

commented Jun 10, 2019

I'm going to let this one live, on the off chance that someone finds a way to make this more elegant.

@calmh calmh reopened this Jun 10, 2019

@calmh calmh added the enhancement label Jun 10, 2019

@merlinuwe

This comment has been minimized.

Copy link
Author

commented Jun 10, 2019

"Reihenfolge" instead of "Dateiübertragungsreihenfolge" would be shorter and stays understandable in this context.

(I wear glasses...)

@calmh

This comment has been minimized.

Copy link
Member

commented Jun 10, 2019

I'm starting to get over 40 and holding my phone at arms length, so not judging. ;)

Probably it would be good to tweak down the length of or even abbreviate some of the column labels.

@merlinuwe

This comment has been minimized.

Copy link
Author

commented Jun 10, 2019

That's the real reason, why selfiesticks exist. ;-) I'm 55. Thanks for reopening. If you need some more german abbreviaitions, don't hestitate to ask me.

@wweich

This comment has been minimized.

Copy link
Member

commented Jun 11, 2019

I have an idea how to display the table columns below each other and will try to dinf time to put together a PR in the next few days.

Setting the display size in Android will effect the @media width, so setting this to a higher value will result in a narrower screen.
But setting the font size somehow does effect the Syncthing-Android WebView but not the "normal" Chrome. So I can't test how I could detect that and put the columns below each other even though they should fit with the current screen width.

@AudriusButkevicius

This comment has been minimized.

Copy link
Member

commented Jun 11, 2019

Doesn't chrome have a super duper screen simulator built in?

wweich added a commit to wweich/syncthing that referenced this issue Jun 11, 2019

gui: Optimize folder/device info for small screens (fixes syncthing#5774
)

break table layout and add button margin on small screens

@calmh calmh closed this in 0d86166 Jun 17, 2019

@calmh calmh added this to the v1.2.0 milestone Jun 18, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.