Skip to content

fix(Giphy): use fixed height for giphy preview to prevent layout shifts#3095

Merged
oliverlaz merged 2 commits intomasterfrom
fix/giphy-preview-fixed-height
Apr 6, 2026
Merged

fix(Giphy): use fixed height for giphy preview to prevent layout shifts#3095
oliverlaz merged 2 commits intomasterfrom
fix/giphy-preview-fixed-height

Conversation

@oliverlaz
Copy link
Copy Markdown
Member

@oliverlaz oliverlaz commented Apr 6, 2026

Summary

  • Set a fixed height (--str-chat__gif-height: 200px) on the giphy container during the preview/shuffle state
  • Prevents layout jumps when shuffling between portrait and landscape giphies
  • Keeps the Shuffle/Send/Cancel action buttons visible without scrolling
  • Add fixed dimensions to the giphy image placeholder so the layout is stable when a giphy fails to load
  • Removed stale TODO comment that this change resolves

Test plan

  • Type /giphy <query> to trigger a giphy preview
  • Click Shuffle repeatedly — verify the container height stays stable and action buttons remain visible
  • Verify both portrait and landscape giphies render properly within the fixed height via object-fit: contain
  • After sending, verify the giphy renders at full dynamic height (no fixed constraint)
  • Simulate a giphy image load failure — verify the placeholder has correct dimensions

Set a fixed height on the giphy container during the preview/shuffle
state so shuffling between portrait and landscape giphies doesn't
cause layout jumps or push the action buttons out of view.
@github-actions
Copy link
Copy Markdown

github-actions bot commented Apr 6, 2026

Size Change: +33 B (+0.01%)

Total Size: 614 kB

📦 View Changed
Filename Size Change
dist/css/index.css 45.5 kB +33 B (+0.07%)
ℹ️ View Unchanged
Filename Size
dist/cjs/audioProcessing.js 1.32 kB
dist/cjs/emojis.js 2.96 kB
dist/cjs/index.js 237 kB
dist/cjs/mp3-encoder.js 1.27 kB
dist/cjs/WithAudioPlayback.js 42.7 kB
dist/css/emoji-replacement.css 456 B
dist/es/audioProcessing.mjs 1.31 kB
dist/es/emojis.mjs 2.47 kB
dist/es/index.mjs 235 kB
dist/es/mp3-encoder.mjs 756 B
dist/es/WithAudioPlayback.mjs 42.5 kB

compressed-size-action

@codecov
Copy link
Copy Markdown

codecov bot commented Apr 6, 2026

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 79.57%. Comparing base (b5cb01f) to head (7b6fd80).
⚠️ Report is 1 commits behind head on master.

Additional details and impacted files
@@           Coverage Diff           @@
##           master    #3095   +/-   ##
=======================================
  Coverage   79.57%   79.57%           
=======================================
  Files         426      426           
  Lines       12181    12181           
  Branches     3914     3914           
=======================================
  Hits         9693     9693           
  Misses       2488     2488           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Give the placeholder the same fixed height and width as the loaded
image so the layout is stable when a giphy fails to load.
@oliverlaz oliverlaz merged commit 30e45fa into master Apr 6, 2026
9 checks passed
@oliverlaz oliverlaz deleted the fix/giphy-preview-fixed-height branch April 6, 2026 13:32
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.

2 participants