Some UI Elements do not render as expected when 1rem = 10px

[rnbroadw]

Describe the bug; what happened? Some elements on the chat message thread are not rendering as expected when 1rem equals 10px. It seems like the calculations for some of the elements were done with the expectation that 1rem would always equal 16px.

What are the steps to reproduce the issue?

1. Set html element's font-size property to 10px: html { font-size: 10px }
2. Run a sample chat application and open a chat window.

What behavior did you expect? I expect the ratio of the elements on the screen to be the same when the rem calculation is 10px vs. 16px. Some elements change size when 10px, but other elements stay the same size regardless of the font-size of the html element.

As you can see in the below screenshots, the following elements on the page do not change when the font-size is changed:

• The "Edited" tag.
• The messages about adding group chat participants as well as renaming the chat
• The message content

If applicable, provide screenshots: Rendering correctly: 1rem = 16px:

Rendering incorrectly: 1rem = 10px:

In what environment did you see the issue?

• @azure/communication-react npm package version: 1.9.0-beta.1
• OS & Device: Windows 10
• Browser: Google Chrome
• Browser Version: 121.0.6167.185

Is there any additional information? No