[mraible]

The admin forms put each label in a column beside its field. Short labels such as Title sat a long way from their inputs, and long ones such as "Email address of weblog owner" wrapped onto two lines and made their rows taller than the rest. This puts labels above their fields at every width, which is what narrow screens already showed.

• roller.css: inside .form-horizontal, the label and field columns (col-sm-3/col-md-3 and col-sm-9/col-md-9) become full-width rows, and the label's padding is adjusted to sit just above its field. An empty label that was only there to indent a checkbox is hidden, so checkbox rows line up with the fields.
• EntryEdit.jsp: the Permalink and Status rows were hand-written and out of step with the generated rows around them. Their labels lacked col-form-label, so they were regular weight. The values were wrapped in a <p>, which added a 10px top margin. The status used Bootstrap 3's label class, which Bootstrap 5 shows as coloured text with no padding. They now use the same classes as the other rows, a <div> for the value, and badge. The Status label's for pointed at an id that doesn't exist, so it's gone.

No markup changes outside those two rows; every other form picks the layout up from the stylesheet.

I checked it on a copy of a real site (22 admin pages, 115 form rows) at 1200px and 390px: no row is left side by side, nothing overflows, and there are no script errors. I didn't run the UI tests locally. They don't reference the markup changed here, and CI runs them on this pull request.

The entry editor and the site configuration page at 1200px wide, before and after:

Before	After

[snoopdave]

PR-Review: no issues. Note: label:empty only matches labels with no whitespace inside. The hand-written indent labels qualify; if a gap shows up later on a Struts-generated row, give that label a class instead.