Mobile UI — Search-First Single-Column Layout

Introduced 2026-03-14. The desktop three-column layout (chat list | conversation | CRM panel) does not work on mobile screens. The mobile UI provides a completely different layout optimized for small screens.

Breakpoint

Mobile layout activates at 768px viewport width, controlled by the useMobileNav hook.

Layout: MobileFocusView

The mobile UI is a single-column view built around a search-first design:

Top Bar

• Recent conversation avatars — horizontal row of circular avatars for quick access to recent chats
• Search toggle (magnifying glass icon) — expands a search input for finding contacts
• Hamburger menu — access to navigation items that don’t fit on mobile
• Dev version number — displays DDMM.N format version in top-right during development

Contact Search

• Debounced text input with dropdown results
• Searches across contact names, phone numbers, and tags
• Selecting a contact loads their conversation and CRM data

Compact Contact Strip

When a contact is selected, a compact strip shows:

• Avatar (small)
• Name and phone number
• Tag chips

5-Tab Bar

All CRM features are accessible inline via tabs at the bottom of the contact strip:

Tab state persists across contact switches.

Responsive Components

These components also received mobile-specific styling:

• TopBar — hamburger menu replaces full nav button row
• LoginPage — QR code layout reflows for narrow screens
• MessageComposer — responsive sizing for mobile keyboards
• MessageBubble — adjusted max-widths for narrow viewports
• Modals — mobile-safe max-widths to prevent overflow

Key Files

Version Numbering Convention

During development, the TopBar displays a version number in DDMM.N format (e.g., 1403.7 = March 14th, revision 7). This replaces the “Queunir” brand text and provides a quick visual reference for which build is running.