[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

Branch

arcpatch-D8525

Lint

No Lint Coverage

Unit

No Test Coverage

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.