Fix hearts display: show all 10 hearts with correct counts on mobile and desktop

[Copilot]

PR #258 flip-flopped between 5 and 10 hearts on mobile, landing on 10 hearts with flexWrap: 'wrap' — causing ugly multi-line wrapping on small screens and 14× MUI hydration errors in console. A subsequent attempt to fix this by scaling to 5 hearts on mobile caused a visual mismatch where the filled heart count didn't match the numeric X/10 display.

Changes

• Always show all 10 hearts — no more mobile scaling to 5 that caused confusing mismatches (e.g., "3/10" showing 1.5 filled hearts out of 5)
• Responsive heart sizing — hearts render at 1.2rem on mobile via theme breakpoint in StyledRating, so all 10 fit cleanly in one row
• defaultValue → value on read-only StyledRating — eliminates "changing defaultValue of uncontrolled component" errors
• TextField value+defaultValue conflict — consolidated to value={feedback_url || "..."}

// RatingItem always shows all 10 hearts, sized responsively
<StyledRating readOnly value={value} max={maxHearts} ... />

// StyledRating uses smaller hearts on mobile
[theme.breakpoints.down('sm')]: {
    '& .MuiRating-icon': { fontSize: '1.2rem' },
},

Desktop (1200px):

Mobile (375px):

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
frontend-ohack-dev	Ready	Preview	Mar 15, 2026 2:04am

[gregv]

@copilot
Can you make sure you are displaying the correct number of hearts? Here is what I see now where the number doesn't match the hearts

[gregv]

@copilot Can you make sure you are displaying the correct number of hearts? Here is what I see now where the number doesn't match the hearts

[Copilot]

@copilot Can you make sure you are displaying the correct number of hearts? Here is what I see now where the number doesn't match the hearts
<img width="864" height="1928" alt="Screen...

Fixed in c3beb07. The 5-heart mobile scaling was causing the mismatch — "3/10" showed only 1.5 filled hearts out of 5. Now all 10 hearts are always shown (with 1.2rem sizing on mobile so they fit), so the filled count matches the numeric display exactly.

Desktop:

Mobile:

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• cdn.ohack.dev
  • Triggering command: /opt/hostedtoolcache/node/24.14.0/x64/bin/node /opt/hostedtoolcache/node/24.14.0/x64/bin/node /home/REDACTED/work/frontend-ohack.dev/frontend-ohack.dev/node_modules/next/dist/server/lib/start-server.js (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)