(fix) O3-4463: Hide sidebar on wider workspaces to fix multi-section form layout

[praneeth622]

Requirements

• This PR has a title that briefly describes the work done including the ticket number. If there is a ticket, make sure your PR title includes a conventional commit label. See existing PR titles for inspiration.
• My work conforms to the OpenMRS 3.0 Styleguide and design documentation.
• My work includes tests or is validated by existing tests.

Summary

PR #461 (O3-4410) changed the sidebar visibility logic so that the sidebar shows on all workspace sizes except narrow. This caused a layout regression on wider workspaces — the sidebar (180px) and form content compete for space, resulting in a cramped/squished layout for multi-section forms.

This fix adds 'wider' to the isFormWorkspaceTooNarrow check, so the sidebar only renders on extra-wide and ultra-wide workspaces where there is sufficient room. On narrow and wider workspaces, multi-section forms use bottom navigation buttons instead.

Workspace Size	Sidebar	Navigation
narrow	Hidden	Bottom buttons
wider	Hidden (was showing — the bug)	Bottom buttons
extra-wide	Visible	Left sidebar
ultra-wide	Visible	Left sidebar

Screenshots

Before (bug — sidebar cramped on wider workspace)

After (fix — sidebar hidden on wider, bottom buttons used instead)

Related Issue

https://openmrs.atlassian.net/browse/O3-4463

Other

• One line changed in src/form-engine.component.tsx
• No CSS changes, no new dependencies
• Restores the intended sidebar behavior from before PR (fix) O3-4410: Adjust Form Workspace Size & Enhance Form UI #461
• Existing tests unaffected

[Copilot]

Pull request overview

Adjusts the FormEngine layout rules to prevent the multi-section sidebar from rendering on wider workspaces, addressing a regression where the sidebar and form content competed for space.

Changes:

• Treat wider workspaces as “too narrow” for the multi-section sidebar.
• As a result, multi-page forms on wider now use bottom navigation controls instead of the left sidebar.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[praneeth622]

@gracepotma 👋

Could you please take a look at this PR when you get a chance?
It fixes the sidebar visibility regression on wider workspaces for multi-section forms (O3-4463).

Would really appreciate your review and approval for merge

Thanks!

[praneeth622]

Hi @NethmiRodrigo , gentle ping on this PR. It addresses O3-4463 (Blocker priority, targeted for RefApp 3.8.0) which causes a layout/spacing issue with multi-section forms using left navigation.

The fix hides the sidebar on wider workspaces to prevent the layout from breaking. Happy to address any feedback or make changes.

Would you (or @jayasanka-sack / @denniskigen ) be able to take a look? Thank you!

[praneeth622]

This PR addresses BLOCKER-priority O3-4463 (reported by @gracepotma) and has been awaiting review for 5 weeks. I've now addressed Copilot's feedback, renamed the memoized flag from isFormWorkspaceTooNarrow to shouldHideFormSidebar to match current semantics (the flag is true for both 'narrow' AND 'wider' sizes, so the old name was misleading), and added a test that covers the 'wider' workspace multi-section case.

Test added in src/form-engine.component.test.tsx: mocks useFormWorkspaceSize → 'wider' and usePageObserver → hasMultiplePages: true, then asserts the sidebar is not rendered and the bottom ButtonSet (Cancel + Save) is. yarn test --testPathPattern=form-engine.component passes; existing form-engine.test.tsx (41 tests) also still passes.

No change to the sidebar visibility logic itself only rename + new test coverage.

Requesting review from @dkayiwa @ibacher @samuelmale happy to jump on a call if there are design concerns about hiding the sidebar on wider workspaces vs the earlier behavior