Adjusted positioning of elements when language is set to a RTL language

[LianaHarris360]

Summary

This PR adjusts and corrects the transcript handling for RTL languages.

RTL-language transcripts with Kolibri set to an LRT language (Kolibri set to English, transcript in Arabic):

LTR-language transcripts with Kolibri set to an RTL language (Kolibri set to Arabic, transcript in English):

RTL-language transcripts with Kolibri set to an RTL language (Kolibri set to Arabic, transcript in Arabic):

References

Closes #6187

Reviewer guidance

• View RTL-language transcripts with the app set to an LRT language
• View LTR-language transcripts with the app set to an RTL language
• View RTL-language transcripts with the app set to an RTL language
• Verify if the transcript language directions are correct

Testing checklist

• Contributor has fully tested the PR manually
• If there are any front-end changes, before/after screenshots are included

PR process

• PR has the correct target branch and milestone
• PR has 'needs review' or 'work-in-progress' label
• If PR is ready for review, a reviewer has been added. (Don't use 'Assignees')
• If this is an important user-facing change, PR or related issue has a 'changelog' label
• If this includes an internal dependency change, a link to the diff is provided

Reviewer checklist

• Automated test coverage is satisfactory
• PR is fully functional
• PR has been tested for accessibility regressions
• External dependency files were updated if necessary (yarn and pip)
• Documentation is updated
• Contributor is in AUTHORS.md

[marcellamaki]

Looks good to me! Thank you @LianaHarris360 for all of the efforts on this :)

[pcenov]

LGTM as well - no issues observed while manually testing this. :)