Etcher: Unable to select drive after selecting image. Problem with UI.

[henader]

Right after launching Etcher looks like this:

Then whe I select an ISO (in this case Windows 10) it does something weird with UI:

Is looks like the problem with UI, because if I select an ISO with shorter name I get different reults. Example:

[jviotti]

Hi @henader ,

Thanks a lot for raising this, I guess we never considered the possibility of such a long file name :)

Its still not very clear to me what would be the ideal solution:

1. Only display X number of characters and show a couple of dots at the end, and potentially show the whole name as a tooltip.
2. Split the name into multiple lines, although breaking a word without spaces looks really bad and confusing, and it still doesn't solve the issue completely -- e.g: if you still have a very long file name, it could still overflow to the bottom.

I'll ping Etcher's designer for some input on this.

[jsejcksn]

Since this is still open, I'd like to recommend the former idea, but instead of terminating the preview name with an ellipsis, show an ellipsis in the middle of it. For example, if you decide that the file name preview is 30 characters:

Original

pl_windows_7_home_premium_with_sp1_x64_dvd_u_676540.iso

Ok

pl_windows_7_home_premium_with...

More useful (shows extension)

pl_windows_7_home_premium_....iso

Even more useful (shows last half of file name, too)

pl_windows_7_ho...vd_u_676540.iso

[jviotti]

Hi @jsejcksn,

Sounds like a good idea! We're currently discussing this, and looks like we'll go with your suggestion plus a small label that you can click to show the full file name.

[jviotti]

Design sketches:

[henader]

Looks like a good solution. Just a minor thing: if the filename is wider then the preview-box I think it will be ok to multiline it without mercy.

[jsejcksn]

@jviotti Looks good, except that the label looks a little like it's "pointing" to Select Drive because it's centered and because of its position relative to the top of the circle around step 2. Perhaps you could move it from the center to above the truncated filename with an actual tooltip arrow:

[jviotti]

Hi @henader @jsejcksn

Thanks a lot of the awesome feedback. Some way to make it clearer that the modal refers to the image would be nice.

/cc @taahirisaacs

[jviotti]

I've implemented this fix with the centred modal (instead of above a step) for simplicity, and we can't take it from there afterwards!