Skip to content

Improve mobile UI: estimate card and chat bar don't work well on phone #5

@masonearl

Description

@masonearl

Problem

The app is desktop-first. On a phone (375px viewport), two things break badly:

  1. Chat input bar — the textarea and send button overlap or get pushed out of view by the keyboard
  2. Estimate result card — the table is too wide, requires horizontal scroll, and the PDF export button is hard to tap

Construction workers check things on their phones constantly. A super reviewing an estimate on the job site shouldn't need a laptop.

What to fix

In assets/css/styles.css:

  • Make the estimate card table stack vertically (label / value) below 480px instead of a side-by-side table
  • Fix the chat input to stay above the keyboard on mobile (use position: sticky; bottom: 0 within a proper scroll container)
  • Ensure the PDF export and quick action buttons are at least 44×44px tap targets

How to test

Use Chrome DevTools → Device Toolbar → iPhone 12 (390×844) and test:

  1. Open the quick estimate form and submit
  2. Try to scroll the result card
  3. Try to type in the chat and hit send

Good first issue

Pure CSS work, no API or backend knowledge needed.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions