# Product Updates Card Layout - Image Fill Implementation


**Last Updated:** 2025-11-20

## Overview

Feature cards on product updates pages (`produkt_updates.php` and `produkt_updates_month.php`) use a full-height image fill layout where images fill the entire left portion of the card container, going edge-to-edge (up, down, and left).

## Implementation Details

### Image Container Structure

**Before:**

```html
<div
  class="lg:w-1/2 flex-shrink-0 bg-[#f9fafb] flex items-center justify-center p-4 lg:p-8"
>
  <div class="w-full">
    <div class="rounded-xl overflow-hidden border border-[#EDEFF3] shadow-sm">
      <img src="..." alt="..." class="w-full h-auto object-contain" />
    </div>
  </div>
</div>
```

**After:**

```html
<div class="lg:w-1/2 flex-shrink-0 overflow-hidden self-stretch">
  <img src="..." alt="..." class="w-full h-auto lg:h-full object-cover" />
</div>
```

### Key Changes

1. **Removed padding**: Removed `p-4 lg:p-8` to allow edge-to-edge fill
2. **Removed wrapper divs**: Removed nested divs with rounded corners and borders
3. **Removed background**: Removed `bg-[#f9fafb]` background color
4. **Added overflow-hidden**: Added to image container to clip image at edges
5. **Added self-stretch**: Ensures image container matches height of text content container
6. **Changed object-fit**: Changed from `object-contain` to `object-cover` to fill container
7. **Responsive height**: Uses `h-auto` on mobile, `lg:h-full` on desktop

### Card Container Setup

The card container uses:

- `flex flex-col lg:flex-row` - Stacks on mobile, side-by-side on desktop
- `overflow-hidden` - Clips image at card edges
- `rounded-2xl` - Rounded corners on card (not on image)

### Responsive Behavior

**Mobile (`< lg` breakpoint):**

- Card stacks vertically (`flex-col`)
- Image fills full width (`w-full`)
- Image maintains aspect ratio (`h-auto`)
- Image uses `object-cover` for proper cropping

**Desktop (`lg` breakpoint and above):**

- Card displays side-by-side (`lg:flex-row`)
- Image takes 50% width (`lg:w-1/2`)
- Image fills full height (`lg:h-full`)
- Image uses `object-cover` to fill container while maintaining aspect ratio

## CSS Classes Used

### Image Container

- `lg:w-1/2` - 50% width on desktop
- `flex-shrink-0` - Prevents shrinking below 50% width
- `overflow-hidden` - Clips image at container edges
- `self-stretch` - Stretches to match sibling height in flex container

### Image Element

- `w-full` - Full width of container
- `h-auto` - Auto height on mobile (maintains aspect ratio)
- `lg:h-full` - Full height on desktop (fills container)
- `object-cover` - Fills container while maintaining aspect ratio (crops if needed)

## Visual Result

- Images fill the entire left portion of the card
- Images go edge-to-edge (no padding on left, top, bottom)
- Images maintain aspect ratio with proper cropping
- Images fill full height of card container on desktop
- Responsive behavior works correctly on all screen sizes

## Files Modified

- `v2/pages/produkt_updates.php`: Lines ~549-557
- `v2/pages/produkt_updates_month.php`: Lines ~507-515

## Browser Compatibility

- Chrome/Edge: ✅ Full support
- Firefox: ✅ Full support
- Safari: ✅ Full support
- Mobile browsers: ✅ Full support

## Performance Considerations

- `object-cover` is hardware-accelerated in modern browsers
- No layout shifts (CLS) as image dimensions are handled by CSS
- Images maintain aspect ratio, preventing distortion
- `overflow-hidden` ensures clean edges without extra rendering

## Maintenance Notes

When modifying card layouts:

1. Keep `overflow-hidden` on image container for edge clipping
2. Use `self-stretch` to ensure image matches text container height
3. Maintain responsive height classes (`h-auto lg:h-full`)
4. Always use `object-cover` for fill behavior
5. Ensure card container has `overflow-hidden` for proper clipping