Client Portal Logo Cropping Issues (Top-Left Navigation vs Header Logo)

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

• Display may vary slightly depending on screen size, browser, or zoom level
• Related image behaviour guidance:
  https://ezekia.freshdesk.com/support/solutions/articles/101000473573