All of the site forms and the user profile display use a CSS design pattern of having fixed-width (7em) labels that float: left;. This is a fairly brittle design and has caused many bugs with content overlapping the labels (#1278), wide content breaking onto new lines, form fields that don't fill the width correctly*, etc. It feels like once or twice a year that an edit introduces a layout bug.

Since the site was created, CSS has gained a grid layout that's the perfect tool for this job. (Well, probably! It's certainly possible there's something even better I'm unaware of.) A grid layout would allow us to directly express this idea that there's a column of labels matched with a column of fields, and then on mobile the labels appear above the fields.

This is a pretty good-sized redesign, if anyone would like to contribute. I guess the first step would be to make a checklist of the site forms and user profile, then work down through it with one or more PRs. There are a couple forms that use space a little differently (/search but this is probably not an intentional inconsistency. The two complex forms are (/settings (so many fields and sections!) and the inline comment form (changes width based on reply depth).

Maybe there's the opportunity for more design improvements that are in keeping with the site's pretty plain look, relying on native widgets.

• My current view in Firefox (desktop with a narrow window to see the mobile layout):