fix(ui): resolve Layer5 logo cropping in navbar (#7946)

[Joiejoie1]

Description

This PR fixes #7946
Resolves the issue where the Layer5 logo appeared cropped/cut off in the navigation bar by adjusting SVG overflow rules and scaling behavior.

Notes for Reviewers

• Updated SVG overflow and height/width constraints on the navbar logo component to prevent clipping across responsive breakpoints.

• Verified visual alignment on desktop, tablet, and mobile viewports.

• Tested locally with gatsby develop to ensure no layout regressions in the navigation header.

Signed commits

• Yes, I signed my commits.

Before:

After:

Summary by CodeRabbit

• Bug Fixes

  • Improved logo display behavior across desktop and responsive navigation layouts.
  • Prevented logo SVGs from being unintentionally clipped or constrained.

• Style

  • Reformatted navigation styling for improved consistency without changing existing visual behavior.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: c9880587-e4e6-433d-8e76-3b80771cde26

📥 Commits

Reviewing files that changed from the base of the PR and between a4b7edd and d78675d.

📒 Files selected for processing (1)

• src/sections/General/Navigation/navigation.style.js

---

📝 Walkthrough

Walkthrough

The navigation stylesheet adds explicit display properties to desktop and responsive logo SVGs. It also reformats existing mobile menu, dark-theme, and toggle declarations without changing their values or behavior.

Changes

Navigation styling

Layer / File(s)	Summary
Logo display and CSS formatting src/sections/General/Navigation/navigation.style.js	Logo SVGs use height: auto, overflow: visible, and display: block in desktop and responsive layouts. Existing declarations receive formatting-only changes.

Estimated code review effort: 1 (Trivial) | ~5 minutes

Possibly related PRs

• layer5io/layer5#7928: Updates LFX logo assets and theme-aware logo rendering.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	The CSS changes address issue #7946 by preventing SVG logo clipping in desktop and responsive navigation layouts.
Out of Scope Changes check	✅ Passed	The changes are limited to navigation logo styling and related formatting, with no unrelated code changes identified.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and concisely describes the main change: fixing Layer5 logo cropping in the navigation bar.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[github-actions]

Preview deployment for PR #7950 removed.

This PR preview was automatically pruned because we keep only the 3 most recently updated previews on GitHub Pages to stay within deployment size limits.

If needed, push a new commit to this PR to generate a fresh preview.

[Sbragul26]

@Joiejoie1, I can't reproduce this issue. Could you share the exact steps? A short video would be helpful.

[KumarNirupam1]

reviewed the changes. the added height: auto, overflow: visible, and display: block on the logo svg address the cropping issue and keep the logo scaling correctly across the responsive breakpoints.

the fix is minimal and looks good to me.
lgtm ^^