Built for mobile from day one

How a one-line CSS fix and a card layout finally made Arka feel native on phones.

For most of this year, Arka was a great desktop product with a tolerable mobile experience. That gap is now closed.

The chat input — the single most important UI element in the app — has been rebuilt from scratch for mobile.

The stubborn 100vh bug

Mobile Chrome's URL bar grows and shrinks as you scroll. CSS exposes this through a viewport unit called dvh, which adjusts dynamically to match. Our app container used 100dvh. Should have been fine.

Except — for compatibility with older browsers, we also declared 100vh as a fallback. Somewhere along the way, a responsive override re-declared them in the wrong order. The last value wins in CSS, so 100vh — the largest possible viewport — took over. The chat input was sized for a viewport that did not exist on screen, and got pushed underneath Chrome's bottom chrome.

Users saw their send button cut off. We added 100svh to the chain — the smallest viewport, which never extends beyond visible chrome — and the bug evaporated.

The new card layout

Even with the height fixed, the old single-row input did not work on a narrow phone. There were too many buttons fighting for too little horizontal space. So the input is now a vertical card:

  • The textarea takes up the top row, with a friendly “How can I help you today?” placeholder
  • A second row underneath holds a single + button on the left and the model selector, mic, and send button on the right
  • On mobile, the second row is forced into a tight, no-wrap layout with smaller buttons so everything fits even on a 320-pixel screen

The reasoning brain icon that used to live inline got moved into the model selector dropdown, where it is now called Adaptive Thinking. One less button, more breathing room.

What good mobile chat should feel like

Like any other native app on your phone. The input never gets clipped. The buttons never stack. Scrolling the message list does not jitter. The keyboard pushing up does not throw the layout out of alignment. None of this should be remarkable; that is the point. Pair this fix with our cache invalidation pipeline and every Arka user gets the new layout within minutes of deploy.

Start thinking with Arka AI

Powered by Arka Helix 1. Free to use. No credit card required.