First to Site
Release 3.9

Admin Dashboard Logo Cap on Small Viewports

The Admin and Customer dashboard logos no longer span the entire mobile viewport above the search bar

Overview

The EasyAdmin dashboard title image was sized with col-md-6 col-lg-10 w-100, which resolved to width: 100% of its container. On small viewports the responsive header is the full viewport width, so the logo blew up to span the entire screen, pushing the search bar and content well below the fold.

Both the Admin dashboard and the Customer dashboard rendered the same misbehaviour because the same Bootstrap col-pattern was duplicated across both controllers.

Behaviour after the fix

ViewportBeforeAfter
Desktop (>= md)Logo at intended widthUnchanged - logo still renders within natural bounds
Mobile (< md)Logo blew up to full viewport width, hiding the search barLogo capped at 56px tall, aspect ratio preserved, search bar visible above the fold

The Bootstrap col-md-6 col-lg-10 w-100 chain is replaced with class="img-fluid" plus an inline max-height: 56px; width: auto, which:

  • caps the logo at 56px tall on any viewport
  • shrinks within its container via img-fluid's max-width: 100%
  • preserves natural aspect ratio via width: auto

The Customer dashboard additionally drops a redundant width: 80%; margin: 0px auto parent-div constraint that was no longer needed once the image itself was sized correctly.

Verification

Verified on https://preprod.ftsonline.com.au/admin and https://platform.ftsonline.com.au/admin at desktop and mobile breakpoints. Logo no longer dominates the mobile header; the search bar and dashboard content render as intended at every viewport.

  • PR #896 - shipped as Git tag v3.11.5.