fix: add missing .logoImage CSS class in CNCFInfo component

[shubhtrek]

Hey,

While going through the codebase I noticed that in the CNCFInfo component,
the <img> tag for the CNCF logo has className={styles.logoImage} applied
to it, but if you check styles.module.css — the .logoImage class is
simply not there.

So basically the styling was being referenced but never defined, meaning the
logo just renders at whatever default size the SVG falls back to. Not great.

Added the class with some straightforward responsive styles:

• width: 100% so it fills its container
• max-width: 400px to keep it from going too wide
• height: auto to maintain aspect ratio
• display: block + margin: 0 auto to center it properly

Tested locally, logo looks fine on the homepage in both light and dark mode.

Closes #326

[netlify]

✅ Deploy Preview for kmesh-net ready!

Name	Link
🔨 Latest commit	b42d718
🔍 Latest deploy log	https://app.netlify.com/projects/kmesh-net/deploys/6a4f821c2b81630008f05dd8
😎 Deploy Preview	https://deploy-preview-330--kmesh-net.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[kmesh-bot]

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by:
Once this PR has been reviewed and has the lgtm label, please assign jayesh9747 for approval. For more information see the Kubernetes Code Review Process.

The full list of commands accepted by this bot can be found here.

Details

Needs approval from an approver in each of these files:

• OWNERS

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[gemini-code-assist]

Code Review

This pull request introduces a new .logoImage CSS class to the CNCFInfo styles module to manage image sizing and centering. The review feedback suggests a cleaner approach by letting the parent container handle the maximum width and centering, which simplifies the child image's styles and improves maintainability.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.

[gemini-code-assist]

There is a mismatch between the max-width of the parent container .cncfLogo (500px) and the child image .logoImage (400px). Because of this, margin: 0 auto is required on .logoImage to keep it centered within the parent when the viewport is between 400px and 500px.

A cleaner and more maintainable approach is to let the parent container .cncfLogo handle the sizing and centering, and keep the image styles simple. You can update .cncfLogo (on line 16) to max-width: 400px (or keep it at 500px if that was the intended size) and simplify .logoImage as suggested below. This also ensures there is a newline at the end of the file.

  .logoImage {
    width: 100%;
    height: auto;
    display: block;
  }

[Copilot]

Pull request overview

This PR fixes a missing CSS Module class referenced by the CNCFInfo component so the CNCF logo image is styled consistently and responsively on the homepage.

Changes:

• Adds the missing .logoImage class to src/components/CNCFInfo/styles.module.css.
• Applies responsive sizing and centering rules to prevent the logo from rendering at default SVG dimensions.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 1 out of 1 changed files in this pull request and generated 1 comment.