Skip to content

fix(classroom): fix chat panel layout height, internal scrolling, and message grouping UX - #119

Open
rishavvrajj wants to merge 3 commits into
alphaonelabs:mainfrom
rishavvrajj:fix/classroom-chat-panel-height-and-scrolling
Open

rishavvrajj wants to merge 3 commits into
alphaonelabs:mainfrom
rishavvrajj:fix/classroom-chat-panel-height-and-scrolling

Conversation

@rishavvrajj

@rishavvrajj rishavvrajj commented Oct 16, 2026 •

Copy link
Copy Markdown
Contributor

Summary

This PR fixes the classroom chat panel so it stays within the screen and scrolls internally. It also groups consecutive messages from the same sender to reduce repeated usernames and avatars.

Changes

  • Fixed chat panel height so the classroom page no longer scrolls as a whole.
  • Made #chatMessages scroll independently using flex-1, min-h-0, and overflow-y-auto.
  • Kept the chat header and input fixed with shrink-0.
  • Added smooth auto-scrolling for new messages.
  • Preserved the user’s scroll position when reading older messages.
  • Grouped consecutive messages from the same sender by hiding repeated username/avatar headers.
  • Added data-participant-id to compare the current message sender with the previous one.
  • Used tighter spacing for continuation messages.

Demo

Recording.2026-10-16.151302.mp4

Testing

  • Sent multiple messages from the same user and confirmed they were grouped.
  • Added enough messages to verify only the chat list scrolls.
  • Confirmed the input stays pinned at the bottom.
  • Checked that scrolling upward is not interrupted by auto-scroll.
  • Verified smooth auto-scroll works for the user’s own messages.
  • Confirmed layout classes are removed when leaving the classroom.

Closes #118 Assisted by AI using automatic multi-model routing, primarily Ollama.

@coderabbitai

coderabbitai Bot commented Oct 16, 2026 •

Copy link
Copy Markdown

Important

  • 🔍 Trigger review

This repository does not receive automatic reviews because it has fewer than 10 stars.

Run configuration
  • Source mode: Auto
  • Repository: Unavailable
  • Branch: Unavailable
  • File: No configuration file from this repository applied
  • Commit: Unavailable
  • Layers: Central YAML; Path: .coderabbit.yaml
  • Review profile: ASSERTIVE
  • Plan: Advanced
  • Run ID: aa5144ff-dea5-49e2-9548-d734c07df688
  • Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

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

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

@rishavvrajj rishavvrajj changed the title feat(classroom): fix chat panel layout height, internal scrolling, and message grouping UX fix(classroom): fix chat panel layout height, internal scrolling, and message grouping UX Oct 16, 2026
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] Prevent Virtual Classroom chat panel overflow and group consecutive messages from the same sender

1 participant