MM-70623 Fix GitHub team-sidebar layout after React 19 migration

[cpoile]

The React 19-compatible OverlayTrigger adds an inline-block wrapper around each control, causing the GitHub team-sidebar buttons to bunch together horizontally. Make the container a flex column to preserve one control per row with or without these wrappers.

Based on #1061 (MM-70684-update-to-v12).

Ticket: https://mattermost.atlassian.net/browse/MM-70623

Validation: production build, ESLint, TypeScript checks, and all three existing sidebar tests pass. Reproduced the original layout on localhost and applied the rebuilt frontend. Post-change visual and tooltip verification could not be completed because Chrome stopped responding after reload.

Release Note

Fixed GitHub team-sidebar buttons bunching together after the React 19 migration.

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Essentials

Run ID: 31f58f19-64ce-4ee5-bfb0-a3233f395016

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

---

_{Comment @coderabbitai help to get the list of available commands.}

[cpoile]

@coderabbitai review new code not in base branch MM-70684-update-to-v12

[coderabbitai]

Tip

For best results, initiate chat on the files or code changes.

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
set -euo pipefail

git fetch --no-tags origin MM-70684-update-to-v12
base_ref="origin/MM-70684-update-to-v12"
merge_base="$(git merge-base HEAD "$base_ref")"

printf '%s\n' "Merge base: $merge_base"
printf '%s\n' "Changed files:"
git diff --name-status "$merge_base"...HEAD

printf '%s\n' $'\nDiff:'
git diff --find-renames --find-copies --unified=80 "$merge_base"...HEAD

printf '%s\n' $'\nOutline changed source files:'
git diff --name-only --diff-filter=ACMR "$merge_base"...HEAD \
  | while IFS= read -r file; do
      case "$file" in
        *.js|*.jsx|*.ts|*.tsx|*.css|*.scss|*.less)
          printf '\n--- %s ---\n' "$file"
          ast-grep outline "$file" --items all 2>&1 || true
          ;;
      esac
    done

Length of output: 1225

---

🏁 Script executed:

#!/bin/bash
set -euo pipefail

review_base="refs/remotes/origin/review-MM-70684-update-to-v12"
git fetch --no-tags origin \
  "refs/heads/MM-70684-update-to-v12:${review_base}"

merge_base="$(git merge-base HEAD "$review_base")"
printf '%s\n' "Merge base: $merge_base"
printf '%s\n' "Changed files:"
git diff --name-status "$merge_base"...HEAD

printf '%s\n' $'\nDiff:'
git diff --find-renames --find-copies --unified=80 "$merge_base"...HEAD

printf '%s\n' $'\nOutline changed source files:'
git diff --name-only --diff-filter=ACMR "$merge_base"...HEAD \
  | while IFS= read -r file; do
      case "$file" in
        *.js|*.jsx|*.ts|*.tsx|*.css|*.scss|*.less)
          printf '\n--- %s ---\n' "$file"
          ast-grep outline "$file" --items all 2>&1 || true
          ;;
      esac
    done

Length of output: 5642

---

🏁 Script executed:

#!/bin/bash
set -euo pipefail

echo "=== SidebarButtons render and styles ==="
sed -n '1,320p' webapp/src/components/sidebar_buttons/sidebar_buttons.jsx

echo "=== References to SidebarButtons and containerTeam ==="
rg -n -C 4 -g '*.{js,jsx,ts,tsx}' \
  '(SidebarButtons|containerTeam)' webapp/src

echo "=== Candidate tests ==="
fd -t f . webapp | rg -i '(sidebar.*button|button.*sidebar).*(test|spec)|(__tests__|test).*(sidebar.*button|button.*sidebar)'

echo "=== Test outlines ==="
fd -t f . webapp \
  | rg -i '(sidebar.*button|button.*sidebar).*(test|spec)|(__tests__|test).*(sidebar.*button|button.*sidebar)' \
  | while IFS= read -r file; do
      echo "--- $file ---"
      ast-grep outline "$file" --items all 2>&1 || true
    done

Length of output: 23054

---

@cpoile Reviewed #1062 against MM-70684-update-to-v12.

I found no issues in the differential. The flex-column container correctly keeps each OverlayTrigger wrapper on its own row in the team sidebar.

You are interacting with an AI system.

[cpoile]

@coderabbitai approve ?

[coderabbitai]

@cpoile Approved. The differential against MM-70684-update-to-v12 has no identified issues.

✅ Action performed

Comments resolved and changes approved.