Skip to content

Commit

Permalink
fix: video modal responsiveness (#726)
Browse files Browse the repository at this point in the history
* video modal fix

* Make video modal occupy full space

* make the video modal occupy full size only for smaller screens

* change screen width upper-bound from 500px to 768px
abirc8010 authored Jan 11, 2025

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
1 parent 727800a commit b889004
Showing 2 changed files with 12 additions and 5 deletions.
8 changes: 8 additions & 0 deletions packages/react/src/views/ChatInput/ChatInput.styles.js
Original file line number Diff line number Diff line change
@@ -112,6 +112,14 @@ export const getCommonRecorderStyles = (theme) => {
display: flex;
margin: auto;
`,
modal: {
'@media(max-width: 768px)': {
height: '100%',
width: '100%',
maxHeight: '100%',
maxWidth: '100%',
},
},
};

return styles;
9 changes: 4 additions & 5 deletions packages/react/src/views/ChatInput/VideoMessageRecoder.js
Original file line number Diff line number Diff line change
@@ -164,18 +164,17 @@ const VideoMessageRecorder = ({ disabled }) => {
<Modal
open={state === 'recording'}
onClose={handleCancelRecordButton}
style={{
display: 'flex',
width: '28rem',
}}
css={styles.modal}
>
<video
muted
autoPlay
playsInline
ref={videoRef}
css={css`
margin-bottom: 2px;
object-fit: cover;
width: 100%;
height: 95%;
`}
/>
<Box css={styles.controller}>

0 comments on commit b889004

Please sign in to comment.