Constrain hero carousel height and stretch to full width on story share portal

[Copilot]

What is the goal of this PR and why is this important?

Hero section was using a flexible aspect ratio that caused vertical expansion with large images. Fixed height prevents layout instability and matches design spec. Additionally, the hero image now stretches horizontally to fill the full container width.

How did you approach the change?

• Hero container: Changed from aspect-[16/6] to h-96 max-h-96 (384px fixed height)
• Image sizing: Added object-cover to hero variant so images crop/scale to fit container
• Full-width stretch: Removed flex centering and added !w-full to ensure image stretches horizontally to fill the container width

<!-- Before: Container height scales with viewport width -->
<div class="aspect-[16/6] bg-gray-200">

<!-- After: Container has fixed max height, image stretches to full width -->
<div class="h-96 max-h-96 bg-gray-200 overflow-hidden">
  <%= render "assets/display_image",
             resource: @featured_story,
             extra_image_classes: "!w-full h-full object-cover",
             variant: :hero %>
</div>

Anything else to add?

Image now:

• Has a constrained height that prevents vertical growth based on image dimensions
• Stretches horizontally to fill 100% of the container width
• Uses object-cover to properly crop/scale while maintaining aspect ratio

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[maebeale]

@copilot stretch the hero image horizontally to fit the width on share_portal index

[Copilot]

@copilot stretch the hero image horizontally to fit the width on share_portal index

I've updated the hero image to stretch horizontally to fill the full width of the container.

Changes in commit 858e3b9:

• Removed flex items-center from the container (was preventing full-width stretch)
• Added !w-full to force the image to fill 100% of the container width
• Image now uses w-full h-full object-cover to fill the entire container while maintaining aspect ratio