Refine AffiliateCard layout, spacing, and thumbnail styling

[google-labs-jules]

This PR improves the visual polish and readability of the AffiliateCard component.

Key changes:

• Top Alignment: Changed the outer Stack alignment to start. This prevents multi-line descriptions from causing vertical balance issues that occurred with center alignment.
• Enlarged Thumbnails: Increased the thumbnail Box size to 20 (80px) to give product images more prominence.
• Enhanced Image Handling: Added a conditional bg-white and padding={2} wrapper for thumbnails when link.imageMode === 'contain'. This ensures that retail partner images with white backgrounds blend naturally into the card's dark background.
• Better Typography: Replaced the previous single-line truncate class on the title with clamp={2}, allowing longer titles to wrap without breaking the layout.
• Improved Spacing: Increased the vertical gap between the category, title, and description to 2.

These changes ensure the affiliate items look premium and are easily readable across different screen sizes. Verified with type-checks, audits, and visual regression tests.

Fixes #2645

---

PR created automatically by Jules for task 14319219807848868259 started by @arii

[google-labs-jules]

👋 Jules, reporting for duty! I'm here to lend a hand with this pull request.

When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down.

I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job!

For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

New to Jules? Learn more at jules.google/docs.

---

For security, I will only act on instructions from the user who triggered this task.

[github-actions]

🚀 Deployment Details (Last updated: Jun 19, 2026, 3:11 PM PST)

🚀 Pushed to gh-pages; publish in progress

• Preview URL: https://arii.github.io/tech-dancer/jules/refine-affiliate-card-layout-14319219807848868259/
• Preview Dashboard: https://arii.github.io/tech-dancer/previews/index.html
• Commit SHA: 0c087d5
• Marker File: verify here

[github-actions]

🐙 GitHub Models Code Review

Powered by GitHub Models

Reviewing: PR #2657

Model: gpt-4.1

Code Review Feedback

HIGH SEVERITY REVIEW

I have reviewed the diff for the stated goals and applied the severity rules strictly. Here are my findings:

---

1. Blocking Bug: Passing clamp and display Props to Text

Evidence:

+          <Text
+            as="h4"
+            variant="body"
+            size="base"
+            weight="font-bold"
+            clamp={2}
+            display="block"
+            className="group-hover:text-accent transition-colors relative z-20 pointer-events-none"
+          >
+            {link.name}
+          </Text>

and

+          <Text
+            variant="body"
+            size="xs"
+            color="dim"
+            clamp={2}
+            display="block"
+            className="leading-relaxed relative z-20 pointer-events-none"
+          >
+            {link.description}
+          </Text>

Analysis:

• The Text component is being passed clamp={2} and display="block".
• Unless the Text component in @/layouts/Primitives is explicitly typed to accept these props, this will cause a runtime error or a TypeScript type error.
• In most UI libraries, clamp is not a standard prop; text truncation is usually handled via CSS classes (e.g., line-clamp-2 in Tailwind).
• display is also not a standard prop for text components unless custom-implemented.
• The previous implementation used className="truncate" and className="line-clamp-2", which are valid Tailwind classes.
• If Text does not support these props, this will break rendering and type-checking.

Severity:

• Blocking: This is a concrete contradiction between the props passed and the likely type signature of Text. If Text does not support these props, the component will fail to render or type-check.

Actionable Fix:

• Replace clamp and display props with appropriate CSS classes (e.g., line-clamp-2, block) in the className prop.
• Verify that Text supports these props; if not, revert to using CSS classes.

---

2. Blocking Bug: Using <img> Instead of <Box as="img">

Evidence:

-            <Box
-              as="img"
+            <img
               src={link.image}
               alt={link.name}
-              maxWidth="full"
-              maxHeight="full"
-              className={link.imageMode === 'contain' ? 'object-contain p-1' : 'object-cover'}
+              className={cn(
+                "max-w-full max-h-full",
+                link.imageMode === 'contain' ? 'object-contain' : 'object-cover'
+              )}
               loading="lazy"
             />

Analysis:

• The previous implementation used <Box as="img">, which is likely a styled component from your design system.
• The new implementation uses a raw <img>.
• If the layout expects a Box component for styling, switching to <img> may break layout, styling, or accessibility.
• If Box is required for consistent styling or theming, this is a regression.

Severity:

• Blocking: If Box is required for layout or styling, this change will break the component's appearance and possibly accessibility.

Actionable Fix:

• Restore <Box as="img"> unless there is a documented reason to switch to <img>.
• If switching to <img>, ensure all styling and accessibility requirements are met.

---

3. Blocking Bug: justify="between" is not a valid value

Evidence:

-          <Box display="flex" align="center" justify="between" width="full">
+          <Box display="flex" align="center" justify="between" width="full" className="relative z-20 pointer-events-none">

Analysis:

• The justify prop is set to "between".
• In most UI libraries (including Chakra, styled-system, etc.), the valid values are "flex-start", "center", "flex-end", "space-between", "space-around", etc.
• "between" is not a valid value and will cause a runtime or type error.

Severity:

• Blocking: This is a concrete contradiction; the value is invalid and will break layout.

Actionable Fix:

• Change justify="between" to justify="space-between".

---

---

JSON Summary

{ "findings": [ { "id": "finding-1", "file": "src/components/ui/AffiliateCard.tsx", "line": 44, "snippet": "", "issue": "Passing 'clamp' and 'display' props to Text component, which likely does not support them. This will cause runtime or type errors.", "status": "new", "fixSummary": "Replace 'clamp' and 'display' with appropriate CSS classes in 'className'." }, { "id": "finding-2", "file": "src/components/ui/AffiliateCard.tsx", "line": 32, "snippet": "", "issue": "Switched from to

. If Box is required for styling or layout, this is a regression and will break appearance.", "status": "new", "fixSummary": "Restore unless there is a documented reason to switch." }, { "id": "finding-3", "file": "src/components/ui/AffiliateCard.tsx", "line": 39, "snippet": "", "issue": "The value 'between' for the 'justify' prop is invalid. Should be 'space-between'.", "status": "new", "fixSummary": "Change 'justify=\"between\"' to 'justify=\"space-between\"'." } ] }

---

Final verdict:

[VER

---

⚠️ Review incomplete: the model's response was truncated before completion (likely an output token limit). This review could not verify all findings and should not be treated as a clean pass. Consider re-running.

---

Generated by github-models-code-review

[github-actions]

🐙 GitHub Models Visual Review

Powered by GitHub Models Vision + Blast-Radius Analyzer

Summary: 🔴 2 high · 🟡 0 medium · 🟢 0 low
Reviewing: PR #2657

🔴 /blog/2026-06-01-theme-wear-costumes-accessories (mobile)

Pixel diff: 21.67%

• ✅ Previous issue [finding-1] (Severe layout shift, content loss, broken visual hierarchy, and accessibility issues) appears resolved:
  • Content structure is restored and consistent with the original.
  • Images are properly aligned and sized.
  • Visual hierarchy is maintained; headings, cards, and sections are clear.
  • All interactive elements (links, tags, cards) are present and visually accessible.
  • No obvious content loss or clipping.
• ❌ NEW ISSUE: Minor card spacing regression:
  • The vertical spacing between "Shop Selected Items" cards is slightly reduced, making the list visually denser and harder to scan.
• ✅ Intentional changes (visual polish):
  • Card icons and layout are more consistent.
  • "Read Article" buttons are visually improved and aligned.

Recommendations for Improvement:

• Increase vertical spacing between "Shop Selected Items" cards by 4px for better readability and touch accessibility.
• Consider increasing the contrast of card backgrounds slightly to further distinguish them from the page background, especially for visually impaired users.

---

{ "findings": [ { "id": "finding-1", "route": "/blog/2026-06-01-theme-wear-costumes-accessories (mobile)", "issue": "Severe layout shift, content loss, broken visual hierarchy, and accessibility issues.", "status": "resolved", "fixSummary": "Content structure, image alignment, visual hierarchy, and accessibility are restored and consistent with the original." }, { "id": "finding-2", "route": "/blog/2026-06-01-theme-wear-costumes-accessories (mobile)", "issue": "Reduced vertical spacing between 'Shop Selected Items' cards, impacting readability and touch accessibility.", "status": "unresolved", "fixSummary": "Recommend increasing spacing by 4px for improved usability." } ] }

---

🔴 /blog/2026-06-14-the-story-behind-the-merch-page (mobile)

Pixel diff: 21.18%

• ❌ BUG/REGRESSION:

  • No DOM Text Diff Provided: With a pixel difference of 21.18% and severity marked as HIGH, but no DOM text diff available, this is a major process issue. All visual changes must be accompanied by a DOM diff for traceability and review.
  • Visual Regression Detected: The DIFF screenshot shows widespread changes across nearly the entire page, including text blocks, images, cards, and footer. Without a DOM diff, these cannot be verified as intentional.
  • Potential Layout Shifts: There are significant red highlights around text, images, and card elements, indicating possible layout shifts, spacing changes, or content updates. These could impact readability, spacing consistency, and overall UI stability.
  • Contrast/Clipping Issues: Some image regions and text blocks show heavy diffing, which may indicate contrast or clipping issues, especially if new elements overlap or spacing is reduced.

• Recommendations for Improvement:

  • MANDATORY: Provide a DOM Text Diff for all PRs with visual changes. This is non-negotiable for proper review and traceability.
  • UI Quality: If layout changes are intentional, ensure consistent padding and spacing between cards and text blocks. Consider adding 4–8px more padding to card elements for improved touch targets and visual separation.
  • Contrast: Double-check color contrast for any new or updated elements to ensure accessibility, especially for text over images or colored backgrounds.
  • Clipping: Review image and card boundaries to ensure no content is clipped or overlaps with other elements.

---

{ "findings": [ { "id": "finding-1", "route": "/blog/2026-06-14-the-story-behind-the-merch-page (mobile)", "issue": "Major visual regression detected with no accompanying DOM Text Diff. Widespread pixel changes across text, images, and cards.", "status": "unresolved", "fixSummary": "DOM Text Diff must be provided for all visual changes. Review layout, spacing, and contrast for potential regressions." } ] }

---

Generated by impact-github-models-review — Blast-Radius Analyzer

[arii]

🤖 AI Technical Audit

ANTI-AI-SLOP

The code implementation is clean and avoids redundant abstractions. However, the manual check for link.imageMode === 'contain' is duplicated across the Box styling and the Image tag. Consider consolidating these conditions into a single memoized hook or computed property if this component expands. Current implementation is acceptable for the current scale.

FINAL RECOMMENDATION

Approved

Review automatically published via RepoAuditor.

[arii]

🤖 AI Technical Audit

ANTI-AI-SLOP

• The implementation of conditional bg-white via inline ternary inside cn() is acceptable, but ensure that the bg-white class does not break forced-colors or high-contrast accessibility modes.
• Removed unnecessary p-1 class from the img tag since the parent container now handles padding, reducing layout shift risks.
• The use of clamp={2} is a superior UX improvement over truncate for affiliate product titles.

FINAL RECOMMENDATION

Approved with Minor Changes

Review automatically published via RepoAuditor.