mirror of
https://github.com/mattermost/mattermost.git
synced 2026-08-26 13:17:29 -05:00
SudheerandHarrison Healey
81d6d1ea20
* Fix link preview image layout shift by reserving space with SizeAwareImage
Open graph link previews rendered a plain <img> with no upfront dimensions.
When metadata reported large images (e.g. 2400×1256), the preview started at
zero height and expanded after load, pushing content below and causing scroll
pop in the channel and permalink views.
Use SizeAwareImage (same approach as post images and message attachments) so
known dimensions reserve layout before the image loads. Add
getScaledImageDimensions() to scale metadata down to the preview's CSS limits
(392×240 for large images, 80×80 for thumbnails) so placeholders match the
final rendered size rather than SizeAwareImage's default 350px cap.
Centralize layout constants in constants.ts and sass/utils/_variables.scss
with cross-reference comments, and wire post_attachment_opengraph.scss to
those variables to keep TS layout math and CSS in sync.
Also hide copy/download utility buttons on link preview images via
hideUtilities={true}.
* Change the opengraph dimention variables from SCSS to CSS
* Lint and update snapshot
* Add additional E2E test
This test passes on master in Chrome but not in Firefox.
* Update URL in opengraph-huge.html
---------
Co-authored-by: Harrison Healey <harrisonmhealey@gmail.com>
