Fields do not display in narrow window

[elichad]

I had the site open on half my (large) screen - there should be plenty of room for the fields to be displayed, but the side padding seems to get in the way. This confused me as I initially thought each section would be a drop down form from the list of steps that I could see.

[elichad]

Wait, they do display, but under this block and in a location where they can't be seen right away. I didn't realize I had to scroll...

I think some more dynamic resizing of elements on the page would be good, also scrolling to the relevant field when you click the step in the list.

[jspaaks]

Hi @elichad , thanks for making the issue. For future reference, I'm marking this related to #412 (responsiveness in that issue refers to how the components change size and content as a result of window size).

Related:

• Improve responsiveness (toggle CFF code or Metro line if not enough space) #412

[abelsiqueira]

The last version touched this: https://cffinit.netlify.app/main/#/
@elichad, can you give us feedback?

[elichad]

@abelsiqueira It's much better in that the fields are displayed where I'd expect them to be and it's no longer confusing to view the site on half a screen. However, there are now some other issues with the layout (these are also issues at high zoom):

1. The CFF file displayed to the side is very narrow and thus hard to read. Plus the width varies according to what step you're on, which is odd.
2. On the 'Authors' step, the fields are super cramped - I can't actually click on the 'name-prefix' or 'name-suffix' field because the 'i' icon gets in the way.
3. Additionally, I can't read the placeholder text in the 'name-prefix' or 'name-suffix' fields at this size. Placeholder attributes aren't good for accessbility in general, so I'd recommend moving these labels above the fields.
4. This is a definite diversion now, but while I'm on the author page, tooltips using title also have a lot of accessibility issues. And having both a tooltip and a link out to the schema seems unnecessary - I actually almost didn't notice the tooltips at all. Since this format is an unusual way to enter a name compared to most of the internet, the info is probably better presented in the regular text, or by using the 'i' for a "toggletip" instead.

I'm aware these points are off topic for this issue, so please migrate them to new issues if they haven't already been reported, and close this one.

Screenshots showing the issues:

[abelsiqueira]

Hi @elichad, thanks for the detailed report, these will help a lot. I will create specific issues to deal with these.

[abelsiqueira]

Spawned #611, #612, #613, #614. Closing this.