Summary

Clients may report that their logo appears cropped or misaligned in the client portal, particularly in the top-left navigation area. This is expected behaviour due to fixed display constraints in the UI rather than a system error.


Explanation

The client portal displays logos in two main positions:

  1. Header / Main Portal Logo
    • Larger, more flexible display area
    • Scales proportionally and generally displays correctly
  2. Top-Left Navigation Logo
    • Displayed within a small, fixed-height container
    • The image is scaled to fit the available height
    • Any overflow (extra width or vertical padding) may be cropped

Because of this:

  • Logos with extra whitespace/padding may appear zoomed or cut off
  • Square or tall logos do not display well in this area
  • The system does not dynamically adjust spacing or padding


Cause
This behaviour is due to how images are rendered across the platform:

  • Images are resized to fit constrained containers
  • Aspect ratio is preserved
  • Overflow is hidden

This means the portal expects a pre-optimised, banner-style logo, rather than a full canvas image.


Recommended Solution

For best results, advise clients to:

  • Use a tightly cropped version of their logo (minimal whitespace)
  • Ensure a horizontal (wide) aspect ratio
  • Design the logo as a low-height banner
    • Typically works best when created at around ~40–60px height (as a guideline, not a strict requirement)
  • Use PNG format (preferably with a transparent background)


Workarounds / Best Practice

  • Create separate logo versions for:
    • Header (full logo)
    • Top-left nav (simplified or tightly cropped version)
  • In some cases, use:
    • A shortened logo variant
    • Or just a brand icon for the top-left position


Additional Notes