studio/meet
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

📱(frontend) solve recording responsiveness issue

Browse Source 
Many public servants use PCs with unusual screen resolutions. The screen
height is often quite small, which caused responsiveness issues on the
vertical axis.

When opening the side panel, they could not see the button to start the
recording. I improved the vertical responsiveness to address this issue and
reduce support requests such as “I cannot see the button”.

Users typically do not think about scrolling inside the side panel, so the
layout now better fits constrained screen heights.
This commit is contained in:
lebaudantoine
2025-12-12 12:46:20 +01:00
committed by aleb_the_flash
parent 5163f849e4
commit db75b0eae9
2 changed files with 50 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/frontend/src/features/recording/components/ScreenRecordingSidePanel.tsx
View File

@@ -131,7 +131,20 @@ export const ScreenRecordingSidePanel = () => {
alt={''}
className={css({
minHeight: '309px',
height: '309px',
marginBottom: '1rem',
'@media (max-height: 700px)': {
height: 'auto',
minHeight: 'auto',
maxHeight: '45%',
marginBottom: '0.3rem',
},
'@media (max-height: 530px)': {
height: 'auto',
minHeight: 'auto',
maxHeight: '40%',
marginBottom: '0.1rem',
},
})}
/>
@@ -148,6 +161,9 @@ export const ScreenRecordingSidePanel = () => {
textStyle: 'sm',
marginBottom: '2.5rem',
marginTop: '0.25rem',
'@media (max-height: 700px)': {
marginBottom: '1rem',
},
})}
>
{t('stop.body')}
@@ -178,6 +194,9 @@ export const ScreenRecordingSidePanel = () => {
maxWidth: '90%',
marginBottom: '2.5rem',
marginTop: '0.25rem',
'@media (max-height: 700px)': {
marginBottom: '1rem',
},
})}
>
{t('stopping.body')}
@@ -198,6 +217,9 @@ export const ScreenRecordingSidePanel = () => {
maxWidth: '90%',
marginBottom: '2.5rem',
marginTop: '0.25rem',
'@media (max-height: 700px)': {
marginBottom: '1rem',
},
})}
>
{t('start.body', {

28
src/frontend/src/features/recording/components/TranscriptSidePanel.tsx
View File

@@ -141,7 +141,20 @@ export const TranscriptSidePanel = () => {
alt={''}
className={css({
minHeight: '309px',
height: '309px',
marginBottom: '1rem',
'@media (max-height: 700px)': {
height: 'auto',
minHeight: 'auto',
maxHeight: '45%',
marginBottom: '0.3rem',
},
'@media (max-height: 530px)': {
height: 'auto',
minHeight: 'auto',
maxHeight: '40%',
marginBottom: '0.1rem',
},
})}
/>
{!hasTranscriptAccess ? (
@@ -157,6 +170,9 @@ export const TranscriptSidePanel = () => {
textStyle: 'sm',
marginBottom: '2.5rem',
marginTop: '0.25rem',
'@media (max-height: 700px)': {
marginBottom: '1rem',
},
})}
>
{t('notAdminOrOwner.body')}
@@ -182,6 +198,9 @@ export const TranscriptSidePanel = () => {
textStyle: 'sm',
marginBottom: '2.5rem',
marginTop: '0.25rem',
'@media (max-height: 700px)': {
marginBottom: '1rem',
},
})}
>
{t('beta.body')}{' '}
@@ -222,6 +241,9 @@ export const TranscriptSidePanel = () => {
textStyle: 'sm',
marginBottom: '2.5rem',
marginTop: '0.25rem',
'@media (max-height: 700px)': {
marginBottom: '1rem',
},
})}
>
{t('stop.body')}
@@ -252,6 +274,9 @@ export const TranscriptSidePanel = () => {
maxWidth: '90%',
marginBottom: '2.5rem',
marginTop: '0.25rem',
'@media (max-height: 700px)': {
marginBottom: '1rem',
},
})}
>
{t('stopping.body')}
@@ -272,6 +297,9 @@ export const TranscriptSidePanel = () => {
maxWidth: '90%',
marginBottom: '2.5rem',
marginTop: '0.25rem',
'@media (max-height: 700px)': {
marginBottom: '1rem',
},
})}
>
{t('start.body', {