Skip to content

Fix vertical/portrait media getting cropped in single-attachment posts#715

Open
rufus-gh wants to merge 1 commit into
hackclub:mainfrom
rufus-gh:fix/single-attachment-vertical-cropping
Open

Fix vertical/portrait media getting cropped in single-attachment posts#715
rufus-gh wants to merge 1 commit into
hackclub:mainfrom
rufus-gh:fix/single-attachment-vertical-cropping

Conversation

@rufus-gh

Copy link
Copy Markdown

What & why

Closes #627 and #635.

A devlog/post with a single attachment rendered its media into a fixed 16:9 slide (aspect-ratio: 16 / 9; max-height: 420px) with object-fit: contain and overflow: hidden on the slide. For portrait images and vertical videos this:

This matches @maxwofford's diagnosis on #627 that feed-post-card__video had an overflow cutoff it shouldn't have.

The fix

For the single-attachment case only ([data-count="1"]), let the media keep its own aspect ratio, height-capped at min(70vh, 560px), and set overflow: visible on the slide so video controls stay reachable. Multi-attachment grids are untouched (they still fill their square/16:9 slots).

&__media[data-count="1"] &__media-slide {
  aspect-ratio: auto;
  max-height: min(70vh, 560px);
  overflow: visible;
}

&__media[data-count="1"] &__image,
&__media[data-count="1"] &__video {
  height: auto;
  max-height: min(70vh, 560px);
}

Only app/assets/stylesheets/components/_feed.scss changes. The single render path is app/views/shared/_post_media.html.erb, used by both the feed and devlog detail pages, so the fix covers both surfaces.

Verification

Reproduced the crop and validated the fix in an isolated harness using the exact compiled rules, against a 9:16 portrait, a 16:9 landscape, and a 2-up grid:

  • Portrait — before: only the top ~16:9 slice visible, controls clipped. After: full asset visible, controls reachable. ✅
  • Landscape — visually identical before/after (no regression). ✅
  • Multi-image grid — unchanged. ✅

Open questions

  • min(70vh, 560px) is a judgement call for the height cap; happy to tune to whatever the team prefers.

A devlog/post with one attachment forced its media slide to a fixed
16:9 box with object-fit: contain and overflow: hidden. For portrait
or vertical videos this showed only the top slice of the asset and
clipped the native video controls out of reach.

Single-attachment slides now follow the media's own aspect ratio,
capped at min(70vh, 560px), with overflow visible so controls stay
reachable. Multi-attachment grids are unchanged.

Fixes hackclub#627
Fixes hackclub#635

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@maxwofford

Copy link
Copy Markdown
Member

@rufus-gh & @claude this doesn't follow our https://github.com/hackclub/stardance/blob/main/AI_POLICY.md- please include a screenshot of this working to prove that you tested it

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[BUG] long video formats dont show up correctly

2 participants