Fix 262 image styling

[joanaBrit]

Description

Updated the event card image styling to better match the website "https://www.womencodingcommunity.com/"

Type

• Bug Fix
• New Feature
• Code Refactor
• Documentation
• Other

Related Issue

Screenshots

Desktop view:

Mobile view:

Testing

Tested changes locally

Pull request checklist

Please check if your PR fulfills the following requirements:

• I checked and followed the contributor guide
• I have tested my changes locally.
• I have added a screenshot from the website after I tested it locally

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[womencodingcommunity]

Thanks for working on this fix @joanaBrit! 🎉

Here is a review with a few suggestions and required adjustments:

🚨 Unintended Dependency & Lockfile Changes

• package.json & package-lock.json:
  • The project standardizes on pnpm (using pnpm-lock.yaml). Modifying package-lock.json indicates npm install was likely run locally.
  • react-hook-form was bumped from ^7.66.0 to ^7.76.1, which is unrelated to this UI styling fix.
  • 👉 Action: Please revert the changes to package.json and package-lock.json.

---

🔍 Suggestions & Improvements for src/components/EventCard.tsx

1. Flex Spacing vs. Margins:

   • gap: isMobile ? '18px' : '24px' is applied to the parent container, but the image <Box> also has marginLeft: isMobile ? 0 : '0.5rem' and marginBottom: isMobile ? '1rem' : 0.
   • This creates asymmetric / compound spacing. We can remove marginLeft and marginBottom from the image <Box> and let flex gap handle item spacing cleanly.

2. Explicit Dimensions & flexShrink on Image Container:

   • The image container currently uses minWidth and minHeight. Because Next.js <Image fill /> is absolutely positioned (0px in-flow height), setting explicit width, height, and flexShrink: 0 ensures the image won't collapse or squeeze when text/titles are long:

     width: isMobile ? '100%' : 220,
     height: isMobile ? 180 : 120,
     flexShrink: 0,

3. Performance (sizes prop):

   • When using fill, Next.js defaults to sizes="100vw". Adding sizes="(max-width: 544px) 100vw, 220px" helps Next.js serve properly sized image assets.

4. Unit Consistency:

   • borderRadius: '.6rem' can be updated to '8px' (or theme radius tokens) to match project conventions.

---

💡 Suggested Snippet for src/components/EventCard.tsx

<Box
  sx={{
    display: 'flex',
    flexDirection: isMobile ? 'column-reverse' : 'row-reverse',
    gap: isMobile ? '18px' : '24px',
    alignItems: 'flex-start',
  }}
>
  <Box
    sx={{
      position: 'relative',
      width: isMobile ? '100%' : 220,
      height: isMobile ? 180 : 120,
      flexShrink: 0,
      overflow: 'hidden',
      borderRadius: '8px',
    }}
  >
    <Image
      src={images[0].path}
      alt={images[0].alt}
      data-testid="event-card-image"
      fill
      sizes="(max-width: 544px) 100vw, 220px"
      style={{
        objectFit: 'cover',
        objectPosition: 'top',
      }}
      priority
    />
  </Box>

  <Box sx={{ flexGrow: 1 }}>
    {/* Type, Date, Title, Speaker */}
  </Box>
</Box>

Great job simplifying the image rendering with <Image fill /> and aligning the mobile layout! 👍

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud