The page with form submissions is ugly on screens with >=1280px

[m1kola]

Issue Summary

The page with form submissions looks ugly on screens with >=1280px.

Steps to Reproduce

1. Create a form page with title ~35 characters
2. Submit some data on front-end
3. Go to the Admin UI -> Forms -> Your form page title

Result

1. Too much empty space in header when a form page has a long title
2. Too much place for checkboxes in the submissions table

Expected result

1. I have no idea how to fix the header
2. I guess, it should be possible to make the column with checkboxes to have a fixed width

Screenshots

Viewport width 1280px-1215px (desktops):

Viewport width ~768px (iPad and other tablets):

Technical details

• Wagtail version: 1.12 (from the master branch, commit e2b5dc3).
• Browser version: Google Chrome 60.0.3112.90, MacOS 10.12.5 (16F73)

[lb-]

Proposed solution - we pull out the date search parts from the header completely.

wagtail/contrib/forms/templates/wagtailforms/index_submissions.html

All the search content would go under the <div class="nice-padding"> instead of in the header.

<div class="nice-padding">
        <form action="" method="get" novalidate>
            <div class="col search-bar">
                <ul class="fields row rowflush">
                    {% for field in select_date_form %}
                        {% include "wagtailadmin/shared/field_as_li.html" with field=field field_classes="field-small" li_classes="col4" %}
                    {% endfor %}
                    <li class="submit col2">
                        <button type="submit" name="action" value="filter" class="button button-filter">{% trans 'Filter' %}</button>
                    </li>
                </ul>
            </div>
        </form>

Note: we would need to ensure the form row is not centre aligned but other than that - it looks much better I think.

[lb-]

We will aim to get this resolved as part of the UX unification work in the header - #8539

But in the mean time - marking as a good first issue for anyone to pick up.

Actions required

• Pull out the form from the header and put into the main content <div class="nice-padding">
• Remove any scss that no longer applies
• With styling, fix the date from / date to text wrapping
• With styling (or maybe utility classes), fix the centre alignment of the dates and ensure they are aligned to the left (start)
• Might need to update the col classes to be better suited to this row being stand alone
• Validate in multiple browsers
• Update unit tests
• Check the new location works
• Bonus: Get rid of the inline script tag and put the JS into its own file.

[lb-]

Will be fixed by #8862 - new layout that streamlines the way the filtering shows.