fix overlapping of report filters/table & form submissions

- as of 3.0 - report filters would overflow the viewport in Wagtail
- fix layout issue with form submission lists introduced with filtering changes
- remove invalid css grid-column-start (unused)
- adopt theme variables for all main spacing instead of hard-coded em/rem/px values
- fixes #8929

CHANGELOG.txt

@@ -153,6 +153,7 @@ Changelog
  * Fix: Resolve MySQL search compatibility issue with Django 4.1 (Andy Chosak)
  * Fix: Ensure that the fields on login and password reset forms are visible in forced colors mode (Paarth Agarwal)
  * Fix: Missing a outline on dropdown content and malformed tooltip arrow in forced colors mode (Anuja Verma, LB (Ben) Johnston)
+ * Fix: Layout issues with reports (including form submissions listings) on md device widths (Akash Kumar Sen, LB (Ben) Johnston)
 
 
 3.0.1 (16.06.2022)

client/scss/components/_filters.scss

@@ -1,23 +1,21 @@
 .filterable {
   display: grid;
-  grid-template-columns: auto 300px;
-  grid-column-gap: 50px;
+  grid-template-columns: 1fr minmax(theme('spacing.48'), theme('spacing.64'));
+  grid-column-gap: theme('spacing.12');
 
   &__filters {
-    grid-column-start: col-start -2 col-end -1;
-
     button[type='submit'] {
       display: block;
-      margin-bottom: 20px;
+      margin-bottom: theme('spacing.6');
     }
 
     input[type='checkbox'] {
       display: block;
-      margin-bottom: 10px;
+      margin-bottom: theme('spacing.3');
     }
   }
 
-  @include media-breakpoint-down(sm) {
+  @include media-breakpoint-down(md) {
     grid-template-columns: auto;
 
     &__filters {

client/scss/layouts/_report.scss

@@ -1,16 +1,12 @@
 .report {
   display: grid;
-  grid-column-gap: 50px;
+  grid-column-gap: theme('spacing.12');
 
-  &:not(&--no-margin) {
-    @include nice-padding();
-  }
+  @include nice-margin();
 
   &__results {
-    grid-column-start: col-start 1 col-end 2;
-
     &--text {
-      margin: 0 0.5em 0.5em 0;
+      margin: 0 theme('spacing.[1.5]') theme('spacing.[1.5]') 0;
 
       + .status-tag {
         margin-inline-start: 0;
@@ -25,12 +21,12 @@
   &__actions > div {
     float: right;
     display: block;
-    margin-inline-end: 10px;
+    margin-inline-end: theme('spacing.3');
   }
 
-  @include media-breakpoint-down(sm) {
+  @include media-breakpoint-down(md) {
     form {
-      margin-bottom: 1em;
+      margin-bottom: theme('spacing.3');
     }
   }
 }

docs/releases/4.0.md

@@ -209,6 +209,7 @@ The bulk of these enhancements have been from Paarth Agarwal, who has been doing
  * Stop rich text fields from overlapping with sidebar (Thibaud Colas)
  * Prevent comment buttons from overlapping with fields (Thibaud Colas)
  * Resolve MySQL search compatibility issue with Django 4.1 (Andy Chosak)
+ * Resolve layout issues with reports (including form submissions listings) on md device widths (Akash Kumar Sen, LB (Ben) Johnston)
 
 
 ## Upgrade considerations

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

@@ -99,8 +99,8 @@
 
     {% include "wagtailadmin/shared/header.html" with classname="w-header--no-border" title=page_title subtitle=form_page.title|capfirst icon="form" merged=1 extra_actions=form_actions %}
 
-    <div class="report report--has-filters report--no-margin">
-        <div class="report__results w-overflow-y-hidden w-overflow-x-scroll w-p-3 w-pb-6">
+    <div class="report filterable">
+        <div class="report__results w-overflow-y-hidden w-overflow-x-scroll w-pb-6">
             {% if submissions %}
                 <form action="{% url 'wagtailforms:delete_submissions' form_page.id %}" method="get">
                     {% include "wagtailforms/list_submissions.html" %}
@@ -110,7 +110,7 @@
                 <p class="no-results-message">{% blocktrans trimmed with title=form_page.title %}There have been no submissions of the '{{ title }}' form.{% endblocktrans %}</p>
             {% endif %}
         </div>
-        <div class="report__filters w-p-3">
+        <div class="filterable__filters">
             <h2>{% trans 'Filter' %}</h2>
             <form action="" method="get" novalidate>
                 <button class="button button-longrunning" type="submit">{% icon name="spinner" %}{% trans 'Apply filters' %}</button>