[UI] Layer5 logo appears cropped/cut off on <page/component>

[Joiejoie1]

Description

The Layer5 logo displayed in the navigation bar (header) appears cropped/clipped instead of being fully visible.

This issue affects the visual integrity of the UI and does not align with proper logo display guidelines (logos should not be clipped or distorted).

Expected Behavior

The full Layer5 logo should be clearly visible in the navbar
No part of the logo (top, bottom, or sides) should be clipped
The logo should scale proportionally across different screen sizes

Actual Behavior

The logo in the header/navbar is slightly cut off, especially along the top edge
The cropping becomes more noticeable on certain screen sizes
The footer logo displays correctly, confirming that the issue is isolated to the navbar

Steps to Reproduce

1. Visit the Layer5 website (e.g., homepage or components page)
2. Observe the logo in the top navigation bar
3. Compare it with the logo in the footer
4. Notice that:
   • Header logo → ❌ cropped
   • Footer logo → ✅ correctly displayed

Screenshots / Video

recitup-2026-08-18-14-07-27.webm

Environment:

• Host OS: Windows 10 (or Windows 11 / macOS / Ubuntu — use yours)
• Browser: Chrome (version 151) / Firefox / Edge
• Device: Desktop

🔍 Root Cause (Investigation)

Initial debugging suggests the issue is related to:

- Default browser behavior:
    `svg:not(:root) {
        overflow: hidden;
      }`
 - The SVG logo inside `.logo`:
      - Uses fixed width without proper height scaling
      - Lacks `overflow: visible`, causing clipping

🛠️ Proposed Fix

Update the SVG styling in:
src/sections/General/Navigation/navigation.style.js

Suggested fix:

      .logo svg {
        height: auto;
        overflow: visible;
        display: block;
      }

Also applied the same fix for responsive (mobile) styles.
      

Additional Context

• The issue is isolated to the navigation/header component, not the logo asset itself
• Footer logo renders correctly, confirming the asset is valid
• Fix should ensure consistency across all screen sizes

✅ Acceptance Criteria

• Logo is fully visible in the navbar
• No clipping occurs on any screen size
• Behavior is consistent across browsers
• Matches rendering of footer logo

---

Contributor Resources and Handbook

The layer5.io website uses Gatsby, React, and GitHub Pages. Site content is found under the master branch.

• 📚 See contributing instructions.
• 🎨 Wireframes and designs for Layer5 site in Figma (open invite)
• 🙋🏾🙋🏼 Questions: Discussion Forum and Community Slack.

Join the Layer5 Community by submitting your community member form.

[Joiejoie1]

I'd like to work on this issue as discussed in the website meeting today. @Katotodan

[Joiejoie1]

Hi @Katotodan ,

This issue has been resolved, and a PR has been opened for your approval.
Thanks

[rishiraj38]

@Joiejoie1, please mention all the details in the issue. The current issue description is incomplete.

[avnirbca2024-spec]

/assign me i want to work on this issue

[Joiejoie1]

@Joiejoie1, please mention all the details in the issue. The current issue description is incomplete.

Thanks @rishiraj38 ,

I'll sure do that.

[Joiejoie1]

@Joiejoie1, please mention all the details in the issue. The current issue description is incomplete.

@rishiraj38 ,
I have mentioned all the details in the issue above.
I have also attached a video highlighting the issue.