fix: move call buttons under info panel to fix header overflow

[AyushGupta203]

Fixes #59

Problem

On small/mobile screens, the chat header pill containing Info + Phone + Video buttons overflows outside the screen, making buttons inaccessible.

Solution

• Removed the overflowing pill from the header

• Added a single ⓘ Info button that opens a dropdown panel

• Dropdown now shows:

  • avatar
  • name
  • online status
  • Voice + Video call buttons

• Groups also show a Members button inside the dropdown

• Added a mobile backdrop overlay when the panel is open

• Added responsive width using min(90vw, 16rem) to prevent overflow

• Added outside-click close behavior

• Added Escape key support for accessibility

• Added aria-label support to IconBtn

Before

After

Files Changed

• frontend/src/components/ChatHeader.jsx

Summary by CodeRabbit

Release Notes

• New Features
  • Added info panel to chat headers with voice and video call controls
  • Group chats now feature a members button accessible from the info panel
  • Panels close automatically on Escape key or outside clicks

[coderabbitai]

📝 Walkthrough

Walkthrough

ChatHeader.jsx refactors the chat header layout to move action buttons into a collapsible info panel, addressing UI overflow. The component adds icon imports, creates a reusable button helper, manages panel state with click-outside and keyboard handling, implements an animated info panel with call and member controls, and updates menu wiring.

Changes

Chat Header Info Panel UI Refactoring

Layer / File(s)	Summary
Icon imports and IconBtn helper frontend/src/components/ChatHeader.jsx	Adds Users icon import and defines IconBtn component that spreads props to the underlying button element for reuse across the header.
Info panel state and event handling frontend/src/components/ChatHeader.jsx	Introduces showInfo state and refs for menu and panel elements. Combined effect closes both menu and info panel on outside clicks, closes both plus search on Escape key, with proper event listener cleanup.
Animated info panel with call controls frontend/src/components/ChatHeader.jsx	Replaces the previous inline action buttons block with an Info button that toggles an animated fixed-position panel. Panel conditionally renders voice/video call actions and, for group chats, a members button that opens GroupMembersModal.
Menu and modal wiring adjustments frontend/src/components/ChatHeader.jsx	Adjusts AnimatePresence wrapper for the overflow menu, updates menu items around wallpaper controls, wires GroupMembersModal state toggling, and removes the duplicate IconBtn definition.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

A button once crowded the screen, overflowing with cheer—
Now bundled with care in a panel so clear!
An "i" holds the secrets: to call, to convene,
With click-outs and keypresses keeping it lean. 🐰📞

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The PR title accurately describes the main change: moving call buttons under an info panel to resolve header overflow issues on small screens.
Linked Issues check	✅ Passed	The code changes implement all requirements from issue #59: replacing overflow-causing inline buttons with a single Info button that opens a panel containing call controls and members management.
Out of Scope Changes check	✅ Passed	All changes in ChatHeader.jsx are directly related to fixing the header overflow issue and reorganizing controls under the info panel as specified in issue #59.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint skipped: no ESLint configuration detected in root package.json. To enable, add eslint to devDependencies.

---

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 and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

frontend/src/components/ChatHeader.jsx (1)

254-255: ⚡ Quick win

Expose info panel expanded state to assistive tech.

Add aria-expanded + aria-controls on the toggle, and an id on the panel for better accessibility semantics.

Suggested refactor

-      <IconBtn onClick={() => setShowInfoPanel(v => !v)} aria-label="Open chat info">
+      <IconBtn
+        onClick={() => setShowInfoPanel(v => !v)}
+        aria-label="Open chat info"
+        aria-expanded={showInfoPanel}
+        aria-controls="chat-info-panel"
+      >
         <Info size={18} />
       </IconBtn>
...
-        <motion.div
+        <motion.div
+          id="chat-info-panel"

Also applies to: 265-274

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@frontend/src/components/ChatHeader.jsx` around lines 254 - 255, The toggle
button IconBtn (onClick={() => setShowInfoPanel(v => !v)}) does not expose state
to assistive tech; add aria-expanded={showInfoPanel} and
aria-controls="chat-info-panel" to the IconBtn and give the info panel element
(the block rendered around lines 265-274) an id="chat-info-panel" so screen
readers can associate the control with the panel and announce its
expanded/collapsed state; ensure the aria-expanded value uses the same
showInfoPanel state and the id is unique in the component.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@frontend/src/components/ChatHeader.jsx`:
- Around line 285-288: The img in the ChatHeader info panel is missing an alt
attribute; update the <img> element (inside ChatHeader.jsx / ChatHeader
component) to include a descriptive alt value using available data (e.g., use
selectedUser?.name to produce something like "<name> avatar" with a fallback
like "User avatar" or "Default avatar") so screen readers receive meaningful
text; ensure the prop is added to the same <img> that currently uses
src={selectedUser?.profilePic || "/avatar.png"}.

---

Nitpick comments:
In `@frontend/src/components/ChatHeader.jsx`:
- Around line 254-255: The toggle button IconBtn (onClick={() =>
setShowInfoPanel(v => !v)}) does not expose state to assistive tech; add
aria-expanded={showInfoPanel} and aria-controls="chat-info-panel" to the IconBtn
and give the info panel element (the block rendered around lines 265-274) an
id="chat-info-panel" so screen readers can associate the control with the panel
and announce its expanded/collapsed state; ensure the aria-expanded value uses
the same showInfoPanel state and the id is unique in the component.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: da8c5475-fa29-488f-865e-ef0ff1e94985

📥 Commits

Reviewing files that changed from the base of the PR and between 85c1636 and 710af50.

📒 Files selected for processing (1)

• frontend/src/components/ChatHeader.jsx

[Akash504-ai]

Thanks for the contribution! I have added some follow-up responsiveness and positioning fixes on top of this, and everything is working properly now.