Mobile Chat UX Evolution

"Every pixel on mobile is a luxury."

Prologue: A Screenshot Reveals the Truth

On January 3, 2026, after fixing a production error, we started examining the overall mobile experience. A screenshot revealed the truth:

Markdown tables weren't rendering, showing as raw text:

| Vendor | Plan | Annual Cost | Use Case |
|--------|------|-------------|----------|

This was just the tip of the iceberg.

Diagnosis: Three Pages, Three Renderers

Page	Rendering Method	GFM Table Support
Chat	react-markdown (client)	❌
Alchemy	markdown-to-html.ts (server)	✅
Docs	Same as above	✅

Root cause: Chat's ReactMarkdown wasn't configured with the remarkGfm plugin.

"What Would Linus and Google Do?"

Linus (Unix Philosophy):

• "Do one thing well" — unified rendering pipeline
• Simple tools for simple tasks

Google (Material Design):

• Responsive tables: horizontal scroll on small screens
• Progressive enhancement: core functionality first

We chose minimal changes: add remarkGfm to Chat, add responsive table styles globally.

The Pitfall: CSS Trap

After the fix, testing revealed: the entire page could scroll horizontally.

The culprit:

.prose table {
  display: block;
  overflow-x: auto;
}

display: block on <table> breaks the layout, causing the table to overflow its container.

Lesson: Use a wrapper container for table scrolling:

table: ({ children }) => (
  <div className="overflow-x-auto my-4">
    <table>{children}</table>
  </div>
)

Learning from Google

Finding 1: No Avatar Placeholder

Google: AI responses have no avatar, using left border for hierarchy
Us: AI avatar takes 32px + 12px gap = 44px, about 12% of screen width

Fix: Hide AI avatar on mobile

<div className="hidden sm:flex ...">
  <AlchemyLogo />
</div>

Finding 2: Vertical Input Layout

Google:

┌─────────────────────────┐
│ What do you want to...  │  ← Input takes full row
├─────────────────────────┤
│ [+] [📎] [Think] [🎤][>]│  ← Buttons on separate row
└─────────────────────────┘

Fix: Restructure to vertical layout, input at 100% width.

Finding 3: Compact Model Selector

"Gemini 3 Flash (Preview)" is too long on mobile.

Fix: Compact mode shows only brand name "Gemini"

Finding 4: Shorter Placeholder

Feature hints are already in suggestion buttons. Placeholder shortened to Ask anything...

Final Result

Before vs After

Before:

┌─────────────────────────────────────┐
│ [≡] N... [Gemini 3 Flash (Pre...▼] │
├─────────────────────────────────────┤
│ [🤖] AI response...                 │
│      | Vendor | Plan | Cost |       │ ← Table not rendered
├─────────────────────────────────────┤
│ [📷][📎] Ask anything... Try: [Send]│ ← Cramped, wrapping
└─────────────────────────────────────┘

After:

┌─────────────────────────────────────┐
│ [≡] [Gemini ▼]              [↓][🗑] │
├─────────────────────────────────────┤
│ AI response content...              │ ← No avatar, full width
│ ┌─────────────────────────────────┐ │
│ │ Vendor │ Plan │ Cost │ ←scroll │ │ ← Table renders correctly
│ └─────────────────────────────────┘ │
├─────────────────────────────────────┤
│ Ask anything...                     │ ← Full-width input
│ [📷][📎]                     [Send] │ ← Buttons on own row
└─────────────────────────────────────┘

Reusable Design Principles

Principle 1: Learn from Giants, Understand Why

Don't blindly copy Google. Understand the design philosophy:

• Space priority: Content > Actions > Decoration
• Progressive disclosure: Core features first, advanced features folded
• Responsive isn't shrinking: It's redesigning

Principle 2: Constraints as Opportunity

Constraints force us to think:

• What is truly necessary?
• What can be hidden or simplified?
• What should behave differently across devices?

Principle 3: CSS Pitfalls Require Experience

Use wrapper containers for table scrolling, don't modify table's display directly.

Principle 4: Unified But Not Forced

Three pages, three renderers. We chose minimal changes:

• Chat client-side rendering makes sense (streaming)
• Alchemy/Docs server-side makes sense (SEO)
• Unify styles at the CSS layer

Principle 5: Ask "What Would Google/Linus Do"

• Forces you to step back and think about best practices
• Helps build design judgment
• But ultimately adapt to your own context

Epilogue

"Good design isn't adding more, it's removing the unnecessary."

There's still room for improvement:

• Chat list entry could be more visible
• Long responses could collapse
• Add feedback mechanism (thumbs up/down)

But today's optimizations have significantly improved the mobile experience.