mirror of
https://github.com/suitenumerique/meet.git
synced 2026-08-29 03:37:17 +00:00
lebaudantoine
24404e4ea2
Apply the same approach as the PiP screen to the mobile control bar: make sure it never overflows on small phone screens by collapsing some controls into the overflow menu when there is not enough horizontal room.
48 lines
977 B
TypeScript
48 lines
977 B
TypeScript
import { cva, RecipeVariantProps } from '@/styled-system/css'
|
|
import { useTranslation } from 'react-i18next'
|
|
|
|
const controlBarRegion = cva({
|
|
base: {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
flex: '1 1 33%',
|
|
justifyContent: 'center',
|
|
gap: '0.65rem',
|
|
},
|
|
variants: {
|
|
mobile: {
|
|
true: {
|
|
justifyContent: 'center',
|
|
width: '100%',
|
|
},
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
mobile: false,
|
|
},
|
|
})
|
|
|
|
export const CONTROL_BAR_REGION_ID = 'control-bar-region'
|
|
|
|
export type ControlBarRegionProps = React.HTMLAttributes<HTMLDivElement> &
|
|
RecipeVariantProps<typeof controlBarRegion>
|
|
|
|
export function ControlBarRegion({
|
|
children,
|
|
mobile,
|
|
...props
|
|
}: ControlBarRegionProps) {
|
|
const { t } = useTranslation('rooms')
|
|
return (
|
|
<div
|
|
role="region"
|
|
id={CONTROL_BAR_REGION_ID}
|
|
aria-label={t('controls.region')}
|
|
className={controlBarRegion({ mobile })}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</div>
|
|
)
|
|
}
|