Fix text clamping and vertical space filling on Merch page Featured Picks

[google-labs-jules]

Problem Statement

The "Featured Picks" section on the Merch page uses a grid that matches card heights, but non-featured cards had their text clamped to 2 lines, leading to empty space and truncated content.

Goal

To allow the text in non-featured cards to naturally fill the card height while maintaining uniform alignment across the row.

Non-Goals

None.

Proposed Approach

Added optional clampTitle and clampDescription props to the ProductCard component and applied them to the secondary featured items in Merch.tsx.

Alternatives Considered

None.

Architectural Impact

None.

Scope

The changes are limited to the ProductCard component and its implementation in Merch.tsx.

UNDERSTAND THE ISSUE

The current implementation of the "Featured Picks" section causes visual inconsistencies due to the forced clamping of text in non-featured cards.

DETERMINE APPROACH

Implement the optional clampTitle and clampDescription props in the ProductCard component to improve text display.

SPECIFY SCOPE

The scope includes modifications to the ProductCard component and updates to the Merch.tsx file for secondary featured items.

DEFINITION OF DONE

• The ProductCard component has optional clampTitle and clampDescription props.
• Non-featured cards in the "Featured Picks" section display text without clamping.
• Visual alignment across the row is consistent and meets design standards.
• Relevant tests have been created or updated to ensure functionality.

[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, 2:48 PM PST)

🚀 Pushed to gh-pages; publish in progress

• Preview URL: https://arii.github.io/tech-dancer/fix-merch-clamping-11350202490126234332/
• Preview Dashboard: https://arii.github.io/tech-dancer/previews/index.html
• Commit SHA: c169525
• Marker File: verify here

[github-actions]

🐙 GitHub Models Code Review

Powered by GitHub Models

Reviewing: PR #2653

Model: gpt-4.1

Code Review Feedback

Review of Diff:

I have carefully reviewed the changes to ProductCard.tsx and Merch.tsx as described. The previous findings regarding the correct handling of clampTitle and clampDescription props and their application to non-featured cards have been resolved.

NEW HIGH SEVERITY CHECKS

1. Type Safety and Prop Usage

   • The ProductCard component now accepts optional clampTitle and clampDescription props of type ResponsiveProp<number | boolean>.
   • In Merch.tsx, these props are passed as { base: 2, md: true }, which matches the expected type.
   • The clamp prop on the Text component is set to clampTitle ?? (isFeatured ? true : 2), which will resolve to either a number or boolean as expected.

   No contradiction found.

2. Component Usage and Arity

   • All usages of ProductCard in Merch.tsx now match the new signature, with the correct props passed.
   • No missing required props or incorrect arity.

   No contradiction found.

3. Class/Function Existence

   • All referenced components (ProductCard, Box, Stack, Text, Grid) exist and are imported.
   • No evidence of missing or renamed classes/functions.

   No contradiction found.

4. Performance Issues

   • No evidence of performance regressions introduced by this diff. The new props are optional and do not introduce unnecessary renders or computations.

   No contradiction found.

5. Security Issues

   • No new user-controlled input paths are introduced. The only new props are controlled internally.

   No contradiction found.

6. Missing Types

   • All new props are typed.
   • No evidence of missing or incorrect types.

   No contradiction found.

Summary:
I find no new HIGH severity issues in this diff. All previous findings are resolved, and the stated goal is achieved without introducing any blocking bugs, anti-patterns, or regressions.

---

{ "findings": [ { "id": "finding-1", "file": "src/components/products/ProductCard.tsx", "line": 49, "snippet": "clamp={clampTitle ?? (isFeatured ? true : 2)}", "issue": "Ensures clampTitle overrides default clamp logic; no contradiction found.", "status": "resolved", "fixSummary": "Optional clampTitle and clampDescription props are correctly handled." }, { "id": "finding-2", "file": "src/pages/Merch.tsx", "line": 120, "snippet": "clampTitle={{ base: 2, md: true }}", "issue": "Disables clamping for non-featured cards as intended.", "status": "resolved", "fixSummary": "Non-featured cards now display text without clamping." } ] }

[VERDICT: PASS]

---

Generated by github-models-code-review

[github-actions]

🐙 GitHub Models Visual Review

Powered by GitHub Models Vision + Blast-Radius Analyzer

Summary: 🔴 1 high · 🟡 0 medium · 🟢 0 low
Reviewing: PR #2653

🔴 /merch (mobile)

Pixel diff: 13.61%

• ❌ BUG/REGRESSION:

  • No DOM text diff is available, yet the pixel diff is extremely high (13.61%) and marked as HIGH severity.
  • The visual diff shows widespread changes across nearly every merch card, button, and section.
  • Without a DOM diff, these changes cannot be confirmed as intentional content updates.
  • The changes are not limited to minor UI tweaks; they affect the majority of the page, including product cards, buttons, and layout elements.

• Layout/Visual Issues:

  • Significant layout shifts are visible, especially in the spacing and alignment of merch cards and call-to-action buttons.
  • Some cards appear to have altered padding/margins, potentially causing inconsistent vertical rhythm.
  • Button contrast and sizing may have changed, risking accessibility and touch target compliance.
  • The bottom section shows a large diff, possibly indicating clipping or overflow issues.

• Severity:

  • HIGH — This level of pixel difference without a corresponding DOM diff is unacceptable for production. It suggests either a rendering bug, missing DOM diff, or unintended visual regressions.

• Recommendations for Improvement:

  • Immediately block this PR until a valid DOM diff is provided and all visual changes are explicitly documented.
  • Ensure all layout and spacing changes are reviewed against design specs for mobile. Consider increasing vertical padding between cards by 4px for improved touch separation.
  • Audit button color contrast and sizing for accessibility; ensure minimum 48px touch targets and WCAG-compliant contrast.
  • Run automated visual regression tests to catch any clipping or overflow issues, especially in the bottom section.

---

{ "findings": [ { "id": "finding-1", "route": "/merch (mobile)", "issue": "Massive visual changes across merch cards, buttons, and layout with no DOM diff provided.", "status": "unresolved", "fixSummary": "PR must be blocked until DOM diff is available and all visual changes are reviewed and documented." } ] }

---

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

[arii]

🤖 AI Technical Audit

ANTI-AI-SLOP

The implementation adds optional props, which is a clean way to handle configuration. However, I observed a potential for redundant logic in the default prop evaluation. Ensure that the use of ResponsiveProp is actually necessary for all use cases, as standard boolean/number usage might cover 90% of the requirements. The code is concise and avoids over-engineering.

FINAL RECOMMENDATION

Approved

Review automatically published via RepoAuditor.