Left Column: Keep New Chat button above chat list on initial RTL load - #516

Problem

In right-to-left locales (reproduced in both Arabic and Persian), the floating New Chat action button in the left column renders behind the chat list rows instead of floating above them, so it's partially hidden under the chat/channel/group avatars.

Steps to reproduce

1. Set the interface language to an RTL language (Arabic or Persian).
2. Hard-refresh / reload the page while that RTL language is already active.
3. Observe the floating New Chat button in the lower corner — it sits under the chat list rows.

The important detail for root-causing this: switching to an RTL language dynamically from an LTR session does not trigger the bug — the button stays on top as expected. It only appears after a reload with RTL already set. LTR locales are unaffected on both paths.

Root cause

#LeftColumn-main is not a stacking context (position: relative, no z-index). The button (NewChatButton.scss) is position: absolute; z-index: var(--z-chat-float-button) and is a sibling of the chat-list Transition rendered inside #LeftColumn-main.

• On a dynamic content/language switch, the content Transition retains a leftover transform from the slide animation. That makes it a stacking context, which contains the chat list's internal stacking, so the button reliably paints above it.
• On an initial load, the transition is skipped (name="none"), so the Transition has no transform and is not a stacking context. The chat-list content then leaks into the shared parent stacking context, where it can paint over the button.

It only surfaces in RTL because NewChatButton.scss moves the button to the left edge there (&[dir="rtl"] { right: auto; left: 1rem; }), placing it directly over the leaked list content. In LTR the button sits on the right and stays clear.

Fix

Establish the stacking context unconditionally on the content Transition in LeftMain.scss with isolation: isolate, so the button's paint order no longer depends on whether a transform happens to be present at load time. This keeps the existing z-index model intact — no !important, no arbitrary z-index bumps.

#LeftColumn-main {
  > .Transition {
    isolation: isolate;
    overflow: hidden;
    flex: 1;
  }
}

Verification

• RTL — Arabic, reload with RTL already active: button floats above the chat list
• RTL — Persian, reload with RTL already active: button floats above the chat list
• RTL — dynamic LTR → RTL switch: still correct (unchanged)
• LTR — no regression on load or dynamic switch

A short before/after screen recording can be attached here if useful.