Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: video modal responsiveness #726

Merged
merged 12 commits into from
Jan 11, 2025

Conversation

abirc8010
Copy link
Contributor

@abirc8010 abirc8010 commented Dec 24, 2024

Brief Title

Fix video modal responsiveness

Acceptance Criteria fulfillment

  • Set the height of the modal to 98% and ensure proper scaling on various screens.
  • Adjust the video container to height: 95% and use object-fit: cover for better alignment and scaling of the video.

Fixes #725

Video/Screenshots

Screencast.from.2025-01-11.21-54-45.webm

PR Test Details

Note: The PR will be ready for live testing at https://rocketchat.github.io/EmbeddedChat/pulls/pr-726 after approval. Contributors are requested to replace <pr_number> with the actual PR number.

@abirc8010 abirc8010 changed the title video modal fix fix: video modal responsiveness Dec 24, 2024
@Spiral-Memory
Copy link
Collaborator

Good work @abirc8010
Can we please make it cover entire display maybe, that will be better. Just like sidebar maybe.
I don't know, maybe explore a bit more on actual RC app, or some other app to make it more suitable

@abirc8010
Copy link
Contributor Author

@Spiral-Memory I have made it occupy the entire display as you suggested.

Copy link
Collaborator

@Spiral-Memory Spiral-Memory left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM ! Thanks @abirc8010

@Spiral-Memory
Copy link
Collaborator

Hey @abirc8010
I just watched the video now.. I meant occupy full screen only in mobile devices.. not for usual displays

@abirc8010
Copy link
Contributor Author

@Spiral-Memory I made the required changes

@Spiral-Memory
Copy link
Collaborator

Can you update the video bro

@abirc8010
Copy link
Contributor Author

abirc8010 commented Jan 11, 2025

@Spiral-Memory I updated the video.

@@ -112,6 +112,14 @@ export const getCommonRecorderStyles = (theme) => {
display: flex;
margin: auto;
`,
modal: {
'@media(max-width: 500px)': {
Copy link
Collaborator

@Spiral-Memory Spiral-Memory Jan 11, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you please use a standard width here ? Maybe 768 pixels

@Spiral-Memory Spiral-Memory merged commit b889004 into RocketChat:develop Jan 11, 2025
3 checks passed
github-actions bot added a commit that referenced this pull request Jan 11, 2025
@Spiral-Memory Spiral-Memory added the chore a subtle fix label Jan 30, 2025
@Spiral-Memory Spiral-Memory changed the title fix: video modal responsiveness chore: video modal responsiveness Jan 30, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
chore a subtle fix
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Responsiveness issue for video message modal
2 participants