Skip to content

MUL-3398: fix(projects): render plain container on mobile instead of ResizablePanelGroup#4278

Open
ra0811x wants to merge 1 commit into
multica-ai:mainfrom
ra0811x:fix/project-detail-mobile-layout
Open

MUL-3398: fix(projects): render plain container on mobile instead of ResizablePanelGroup#4278
ra0811x wants to merge 1 commit into
multica-ai:mainfrom
ra0811x:fix/project-detail-mobile-layout

Conversation

@ra0811x

@ra0811x ra0811x commented Jun 18, 2026

Copy link
Copy Markdown

Summary

Fixes #4277

ProjectDetail unconditionally rendered ResizablePanelGroup on all screen sizes. On mobile this:

  • showed a visible drag/resize handle
  • blocked touch-scroll inside the panel container
  • prevented the sidebar Sheet from opening cleanly

IssueDetail already handles this by branching on isMobile. This PR brings ProjectDetail to the same standard.

Changes

  • Extract shared detailContent JSX variable
  • Branch on isMobile:
    • Mobile: plain div container + Sheet for sidebar (no resize handle)
    • Desktop: existing ResizablePanelGroup + ResizableHandle (unchanged)
  • Add project-detail.test.tsx with regression tests:
    • mobile does not render data-panel-group
    • mobile sidebar opens as Sheet on button click
    • desktop preserves ResizablePanelGroup and ResizableHandle

Test plan

  • Run vitest run projects/components/project-detail.test.tsx — 3 tests pass
  • Open project detail page on mobile viewport (< 768 px) — no resize handle visible, sidebar opens as sheet
  • Open project detail page on desktop — existing resizable layout unchanged

…anelGroup

ProjectDetail unconditionally rendered ResizablePanelGroup on all screen
sizes, blocking touch-scroll and showing a drag handle on mobile viewports.
This brings ProjectDetail in line with IssueDetail by branching on isMobile:
- mobile: plain div container + Sheet for the sidebar
- desktop: existing ResizablePanelGroup + ResizableHandle (unchanged)

Extract shared detailContent variable to avoid duplicating JSX.
Add regression tests covering mobile layout, Sheet open/close, and
desktop ResizablePanelGroup preservation.

Fixes multica-ai#4277
@vercel

vercel Bot commented Jun 18, 2026

Copy link
Copy Markdown

@ra0811x is attempting to deploy a commit to the IndexLabs Team on Vercel.

A member of the Team first needs to authorize it.

@Bohan-J Bohan-J changed the title fix(projects): render plain container on mobile instead of ResizablePanelGroup MUL-3398: fix(projects): render plain container on mobile instead of ResizablePanelGroup Jun 18, 2026

@Bohan-J Bohan-J left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the PR. The product direction is right, but please address one mobile-layout correctness issue before merge.

Right now useIsMobile() returns false until its effect runs, so a narrow web viewport can still mount the desktop ResizablePanelGroup branch for the first client render before switching to the mobile Sheet branch. Since this PR is specifically trying to keep the project detail page from rendering the desktop resizable layout on mobile, please make that first render safe as well.

Acceptable fixes could include initializing the mobile state synchronously from window.innerWidth when running on the client, or using a CSS/container-query based approach so narrow viewports never mount the resizable panel group. Please keep the desktop layout unchanged for >= 768px, and add/update coverage if the fix changes the mobile branch behavior.

Also note that the backend CI job is currently failing in server/pkg/agent (TestCodexExecuteSemanticInactivityDoesNotAffectNormalTurnCompletion). That failure looks outside the files touched by this PR, but the PR still needs green CI or maintainer confirmation that the backend failure is unrelated before it can merge.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug]: ProjectDetail renders desktop ResizablePanelGroup on mobile, breaking mobile layout

2 participants