Ensure page explorer header item aligns with toggle on sm device

- fixes #8939

CHANGELOG.txt

@@ -154,6 +154,7 @@ Changelog
  * 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)
+ * Fix: Layout issue with page explorer's inner header item on small device widths (Akash Kumar Sen)
 
 
 3.0.1 (16.06.2022)

client/src/components/PageExplorer/PageExplorer.scss

@@ -44,8 +44,8 @@ $explorer-header-horizontal-padding: 10px;
   display: grid;
   grid-template-columns: 1fr auto;
   align-items: center;
-  margin-inline-start: $sidebar-toggle-spacing * 2 + $sidebar-toggle-size;
-  height: $sidebar-toggle-spacing * 2 + $sidebar-toggle-size;
+  margin-inline-start: $mobile-nav-indent;
+  height: $mobile-nav-indent;
 
   @include media-breakpoint-up(sm) {
     margin-inline-start: initial;

docs/releases/4.0.md

@@ -210,6 +210,7 @@ The bulk of these enhancements have been from Paarth Agarwal, who has been doing
  * 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)
+ * Resolve Layout issue with page explorer's inner header item on small device widths (Akash Kumar Sen)
 
 
 ## Upgrade considerations