[8786] Fix left panel collapsing on form reload

[jvega190]

#8786

Summary by CodeRabbit

• Bug Fixes
  • Improved form layout sizing and responsiveness across container size changes.
  • Ensured layout dimensions stay synchronized during initial rendering and resizing.
  • Improved consistency when forms transition between standard and large container layouts.
  • Reduced visual layout inconsistencies during responsive updates and dynamic resizing.

[coderabbitai]

Walkthrough

FormLayout centralizes container measurement in a memoized callback. The callback updates CSS dimensions and large-container state, runs during layout effects, and is shared with the resize observer.

Changes

Form layout measurement

Layer / File(s)	Summary
Shared container measurement callback studio-ui/ui/app/src/components/FormsEngine/components/FormLayout.tsx	FormLayout uses useAtomValue for large-container state. A memoized measureContainer callback updates container CSS variables and atom state. Layout effects and the resize observer reuse this callback.

Estimated code review effort: 2 (Simple) | ~10 minutes

Suggested reviewers: jmendeza

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Title check	✅ Passed	The title clearly identifies the issue and the primary fix for the left panel during form reload.
Description check	✅ Passed	The description provides a direct ticket reference, which satisfies the template requirement.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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

[jvega190]

@coderabbitai can you check if everything looks good? Please give it a final review before I hand over for human review

[coderabbitai]

@jvega190 I will perform a final review of #8851 before human review.

✅ Action performed

Full review finished.

[jvega190]

@coderabbitai how does this work look to be merged? Any issues you can point out?

[coderabbitai]

Tip

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

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
set -euo pipefail

echo "== Pull request metadata =="
gh pr view 8851 --repo craftersoftware/craftercms --json state,isDraft,mergeable,mergeStateStatus,reviewDecision,statusCheckRollup,files

echo
echo "== Pull request diff =="
gh pr diff 8851 --repo craftersoftware/craftercms -- studio-ui/ui/app/src/components/FormsEngine/components/FormLayout.tsx || \
  git diff -- studio-ui/ui/app/src/components/FormsEngine/components/FormLayout.tsx

echo
echo "== FormLayout outline =="
ast-grep outline studio-ui/ui/app/src/components/FormsEngine/components/FormLayout.tsx --items all || true

echo
echo "== FormLayout source =="
cat -n studio-ui/ui/app/src/components/FormsEngine/components/FormLayout.tsx

echo
echo "== Related atom and measurement references =="
rg -n -C 4 '(isLargeContainer|largeContainer|ResizeObserver|measureContainer)' \
  studio-ui/ui/app/src/components/FormsEngine \
  studio-ui/ui/app/src || true

echo
echo "== Relevant tests and package scripts =="
fd -a -i 'FormLayout' studio-ui/ui
fd -a '^package\.json$' studio-ui/ui | head -10 | xargs -r -n1 sh -c 'echo "---- $0"; jq -r ".scripts // {}" "$0"' || true

Length of output: 44933

---

🏁 Script executed:

#!/bin/bash
set -euo pipefail

echo "== GitHub changed-file patch =="
gh api \
  repos/craftersoftware/craftercms/pulls/8851/files \
  --paginate \
  --jq '.[] | select(.filename == "studio-ui/ui/app/src/components/FormsEngine/components/FormLayout.tsx") | .patch'

echo
echo "== Local base-to-head diff =="
base="$(git merge-base HEAD origin/master 2>/dev/null || git merge-base HEAD origin/main)"
git diff --check "$base"...HEAD
git diff -- "$base"...HEAD -- studio-ui/ui/app/src/components/FormsEngine/components/FormLayout.tsx

echo
echo "== Working tree status =="
git status --short

Length of output: 3499

---

@jvega190 I found no blocking code issues in this change.

FormLayout now measures the existing container when the form replaces its atom set. It updates the new isLargeContainer atom before paint. The resize observer still updates the atom after later container-size changes. This directly addresses the reload case where the table of contents used the default collapsed state.

Before merge, complete these GitHub requirements:

• Mark the pull request as ready for review. It is currently a draft.
• Obtain the required human review.
• Wait for the in-progress Travis CI check to complete successfully.

There is no dedicated FormLayout test file. Manual verification should include reloading a large form after an amend and after a rename, without resizing the window.

_{You are interacting with an AI system.}