[web] Fit video tag to wrapper
ClosedPublic
Actions

Authored by • patryk on Jul 18 2023, 1:40 AM.

Details

Reviewers

bartek
tomek
inka
kamil

Commits

rCOMM00ce9bf15a04: [web] Fit video tag to wrapper

Summary

This diff solves the video tag fit problem. We could observe small gap between the wrapper and video tag:

Now video tags fit the wrapper:

Linear task: ENG-4401

Test Plan

The best way to test this is to set background-color: red to wrapper tag using built-in inspection tool in your favorite browser and check if video tag covers wrapper completely.

Tested in Firefox, Chrome, and Safari.

Diff Detail

Repository

rCOMM Comm

Lint

Lint Not Applicable

Unit

Tests Not Applicable

Event Timeline

• patryk created this revision.Jul 18 2023, 1:40 AM

• patryk held this revision as a draft.

Herald added subscribers: tomek, ashoat. · View Herald TranscriptJul 18 2023, 1:40 AM

• patryk edited the summary of this revision. (Show Details)Jul 18 2023, 1:55 AM

• patryk edited the test plan for this revision. (Show Details)

• patryk added reviewers: bartek, tomek, inka, kamil.

• patryk attached a referenced file: F642220: solved.png. (Show Details)

• patryk attached a referenced file: F642219: funny-video-bug.png. (Show Details)

• patryk published this revision for review.Jul 18 2023, 1:59 AM

• patryk added inline comments.

web/media/media.css
25 ↗	(On Diff #28766)	It might be weird that this works, but I found out that setting `display: flex` solves the issue. I'm inheriting the property because we set `display: inline-flex` in `span.multimedia`. I've tried to use `object-fit: fill`, but doesn't seem to work. This property doesn't affect other tags (because we inherit display property).

Harbormaster completed remote builds in B20983: Diff 28766.Jul 18 2023, 1:59 AM

• patryk edited the test plan for this revision. (Show Details)Jul 18 2023, 2:02 AM

Did you check if this doesn't break images? Since you changed a selector that influences span.multimedia > .multimediaImage > img

It doesn't (note: we don't support uploading videos on web right now, that's why there is only an image in chat input bar):

Note to video: I tested this on chat with encrypted and unencrypted multimedia.