mobile-chat-layout-css

What problem does it solve?

This Skill resolves common layout and scrolling bugs in React-based WhatsApp-style chat applications, including messages hidden behind fixed mobile input bars, non-scrolling message lists on desktop, disabled input bars on mobile default view, and clipped page content from incorrect flex container alignment.

Core Features & Use Cases

• Missing CSS Class Fix: Defines missing .hidden-mobile classes referenced in JSX to enable proper mobile layout toggling between sidebar and chat panel.
• Flexbox Scrolling Fix: Adds required min-height: 0 rules to flex containers to enable proper scrolling of message lists on desktop when using flex: 1 and overflow-y: auto.
• Mobile View State Fix: Implements React useEffect logic to automatically show the sidebar on mobile when no conversation is selected, and switch to the chat panel when a conversation is chosen, resolving disabled input bar issues.
• Use Case: React developers building cross-platform chat apps can use this Skill to eliminate hours of debugging layout inconsistencies between mobile and desktop viewports.

Quick Start

Use the mobile-chat-layout-css skill to fix the hidden messages and non-scrolling message list issues in your React chat application.