Remove unnecessary horizontal scroll in RTL UI

[RaymondLuong3]

A horizontal scroll bar appears when the UI is changed to RTL. I think this occurred when we updated to implement material theme, but I did not go back to confirm. This change removes the unnecessary horizontal scroll bar.

---

This change is 

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 82.55%. Comparing base (1cfdd5f) to head (f8258b1).
⚠️ Report is 75 commits behind head on master.
✅ All tests successful. No failed tests found.

Additional details and impacted files

@@           Coverage Diff           @@
##           master    #3263   +/-   ##
=======================================
  Coverage   82.55%   82.55%           
=======================================
  Files         605      605           
  Lines       35313    35313           
  Branches     5745     5740    -5     
=======================================
  Hits        29152    29152           
+ Misses       5313     5301   -12     
- Partials      848      860   +12     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[Nateowami]

This is kind of a blunt-force approach that doesn't get to the root of the problem, and could lead to different problems in the future. Based on my investigation, I believe the problem stems from .cdk-live-announcer-element using left: 0 instead of the logical inset-inline-start: 0

Reviewable status: 0 of 1 files reviewed, all discussions resolved

[RaymondLuong3]

Ok, I found that it was a combination of the .cdk-live-announcer-element and the .cdk-describedby-message-container that had the cdk-visually-hidden class which had the left: 0 style defined. The style is defined in a _index.css file that I believe comes from angular. The style does have a definition for the containing element having dir='rtl' defined, but in this case it wasn't working. I had to manually add that rule to our styles file.

Reviewable status: 0 of 1 files reviewed, all discussions resolved

[Nateowami]

Why not just use a logical property, so nothing has to change between ltr and rtl?

[RaymondLuong3]

Thanks. I introduced the inset-inline-start rule which does work. The left: 0 rule is therefore valid when the UI is in RTL which is unnecessary, but it appears it doesn't affect the layout negatively.

Reviewable status: 0 of 1 files reviewed, all discussions resolved

[pmachapman]

Reviewed 1 of 1 files at r3, all commit messages.
Reviewable status: complete! all files reviewed, all discussions resolved (waiting on @RaymondLuong3)