fix: restore card sizing, alignment, and theme layout changes#7828
fix: restore card sizing, alignment, and theme layout changes#7828dhruveshmishra wants to merge 2 commits into
Conversation
There was a problem hiding this comment.
Pull request overview
Note
Copilot was unable to run its full agentic suite in this review.
Fixes comparison card thumbnail/logo rendering to restore consistent sizing/alignment and ensure Layer5 Academy branding displays correctly in both light and dark themes.
Changes:
- Enhanced
Imageto accept a wrapperstyleprop and adjusted SVG rendering behavior. - Updated
Cardthumbnail selection logic to prefer dark thumbnails and apply logo/banner-specificobjectFit/scaling. - Adjusted card thumbnail container/image CSS and switched Academy comparison thumbnails to SVG.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| src/components/image.js | Adds style passthrough and changes SVG wrapper/img sizing behavior. |
| src/components/Card/index.js | Introduces thumbnail selection + heuristics for logos/banners to control fit and scaling. |
| src/components/Card/Card.style.js | Updates thumbnail layout/padding and enforces consistent wrapper/img sizing. |
| src/collections/resources/comparison/layer5-academy-vs-moocit/index.mdx | Switches light/dark thumbnails from PNG to SVG for consistent branding across themes. |
| const isLogo = | ||
| thumbnail?.extension === "svg" || | ||
| thumbnail?.publicURL?.endsWith(".svg") || | ||
| thumbnail?.publicURL?.toLowerCase().includes("logo") || | ||
| thumbnail?.publicURL?.toLowerCase().includes("icon") || | ||
| thumbnail?.publicURL?.toLowerCase().includes("cncf-landscape") || | ||
| thumbnail?.publicURL?.toLowerCase().includes("academy") || | ||
| thumbnail?.publicURL?.toLowerCase().includes("docker-swarm") || | ||
| thumbnail?.publicURL?.toLowerCase().includes("smp"); | ||
|
|
||
| const isOReillyBanner = | ||
| frontmatter.title?.toLowerCase().includes("introduction to istio") || | ||
| frontmatter.title?.toLowerCase().includes("advanced istio") || | ||
| frontmatter.abstract?.toLowerCase().includes("introduction to istio") || | ||
| frontmatter.title?.toLowerCase().includes("oscon") || | ||
| frontmatter.title?.toLowerCase().includes("o'reilly"); |
There was a problem hiding this comment.
I have resolved the issue by adding optional chaining (?.includes) to prevent any potential runtime TypeErrors on these fields if they are missing or undefined.
| const isLogo = | ||
| thumbnail?.extension === "svg" || | ||
| thumbnail?.publicURL?.endsWith(".svg") || | ||
| thumbnail?.publicURL?.toLowerCase().includes("logo") || | ||
| thumbnail?.publicURL?.toLowerCase().includes("icon") || | ||
| thumbnail?.publicURL?.toLowerCase().includes("cncf-landscape") || | ||
| thumbnail?.publicURL?.toLowerCase().includes("academy") || | ||
| thumbnail?.publicURL?.toLowerCase().includes("docker-swarm") || | ||
| thumbnail?.publicURL?.toLowerCase().includes("smp"); |
There was a problem hiding this comment.
Since this is a simple check and is already verified working, I'd prefer to keep the current explicit checks to avoid introducing any regression risk
dhruveshmishra
force-pushed
the
fix/academy-logo-green-pillars
branch
from
cdbb927 to
16fe1f0
Compare
…ety checks Signed-off-by: dhruveshmishra <dhruveshmishra09@gmail.com>
dhruveshmishra
force-pushed
the
fix/academy-logo-green-pillars
branch
from
56dc8e2 to
4e28029
Compare
|
Preview deployment for PR #7828 removed. This PR preview was automatically pruned because we keep only the 6 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. |
|
@dhruveshmishra Thank you for your contribution! Let's discuss this during the website call tomorrow at 5:30 PM IST | 7 AM CST Add it as an agenda item to the meeting minutes, if you would 🙂 |
|
@Bhumikagarggg sure mam |
Description
This PR fixes #7817
This PR updates the Layer5 Academy comparison card logo to ensure it has green/teal pillars in both light and dark themes, making the branding consistent across both modes.
I am attaching screen recording for the same
before:-
Screen.Recording.2026-06-27.at.1.18.04.AM.mov
after:-
Screen.Recording.2026-06-27.at.1.21.25.AM.mov