Replaces hard-coded pixel values with relative rem units across UI components to improve typography responsiveness and maintainability.
Co-authored-by: Hristo Terezov <hristo@jitsi.org>
* Revert "feat(base/ui/native): Convert rem to px (#15934)"
This reverts commit 057dc0e4d2.
* Revert "fix(StageParticipantNameLabel): size"
This reverts commit a01f4468a0.
* Revert "fix(subtitles): position part1"
This reverts commit 6c6ed8d7a8.
* Revert "fix(ITypographyType): wrong type of fontSize and lineHeight props"
This reverts commit bffcc9092b.
* revert(Tokens): font sizes and line heights back to px from rem
Turns out there are many places that does not expect rem. Temporary reverting this change from commit 6fa94b0bb4. We should bring it back along with proper handling of rem everywhere.
Fixes an issue where subtitles are displayed in the middle of the screen. This is caused because the bottom prop is calculated to an invalid (NaN) value after we started using rem instead of px for theme.spacing.
Reference: https://github.com/jitsi/jitsi-meet/pull/15934
Fixes an issue where subtitles are displayed in the middle of the screen. This is caused because the bottom prop is calculated to an invalid (NaN) value after we started using rem instead of px for lineHeight in theme.
Reference: https://github.com/jitsi/jitsi-meet/pull/15917
- Move the styles from css to tss-react ones
- Dynamic fontSize based on the visible area of the page
- Remove the gaps in the background when a line is wrapped.
- Change the text color to white.
- Remove transparency.
When the toolbox is hidden and due to a ReactFocusLock instance the
focus is returned to the toolbox the whole page scrolls to the toolbox
which is positioned outside of the viewport in the bottom.
Then when the animation for displaying the toolbox is started the
scenario looks like the large video is jumping.
Now we don't return the focus from ReactFocusLock to elements which are
not part of the viewport.
