Fix: Video Room layout overflows and breaks in mobile portrait view #1910

[anshika1179]

Fixes #1910

Changes

• Updated the \VideoRoom\ container height to use \60vh\ on mobile devices and \750px\ on desktop/tablet to prevent vertical stretching.
• Converted the main layout grid in \Sessions.tsx\ to use \lex-col\ on mobile, ensuring the chat sidebar stacks cleanly below the video container rather than overflowing or getting squeezed.
• The UI is now responsive and scrollable in mobile portrait view.

Summary by CodeRabbit

• Style
  • Improved responsive layouts for video rooms and sessions.
  • Video room content now adapts its height and stacks vertically on smaller screens.
  • Sessions content now displays in a single column on smaller screens and a three-column grid on larger screens.

[vercel]

@anshika1179 is attempting to deploy a commit to the durdana3105's projects Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: a33e327b-b18e-43ce-b599-3feda57fb662

📥 Commits

Reviewing files that changed from the base of the PR and between 880eed9 and 204c0f8.

📒 Files selected for processing (2)

• src/components/VideoRoom.tsx
• src/pages/Sessions.tsx

---

📝 Walkthrough

Walkthrough

The video room now uses responsive height and column layout on smaller screens. The sessions container now uses a column layout below the large breakpoint and retains its three-column grid on large screens.

Changes

Responsive layouts

Layer / File(s)	Summary
Responsive container layouts src/components/VideoRoom.tsx, src/pages/Sessions.tsx	VideoRoom uses 60vh height with md:h-[750px] and column flex layout. Sessions uses column flex layout on smaller screens and a three-column grid at large breakpoints.

Estimated code review effort: 1 (Trivial) | ~5 minutes

Suggested reviewers: arshvermagit

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Linked Issues check	⚠️ Warning	The changes address mobile stacking and sizing, but they do not implement the collapsible chat sidebar required by issue #1910.	Implement or reference a collapsible chat sidebar for mobile portrait layouts, then verify vertical scrolling and participant video stacking.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly describes the mobile Video Room layout overflow fix addressed by the changes.
Out of Scope Changes check	✅ Passed	The responsive height and layout changes in both files directly support the mobile portrait overflow fix in issue #1910.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing Touches 💡 1

🛠️ Fix failing CI checks 💡

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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