Skip to content

fix: mobile layout breaks on screens narrower than 375px#463

Open
nancysangani wants to merge 1 commit into
param20h:devfrom
nancysangani:fix/mobile-layout-375px
Open

fix: mobile layout breaks on screens narrower than 375px#463
nancysangani wants to merge 1 commit into
param20h:devfrom
nancysangani:fix/mobile-layout-375px

Conversation

@nancysangani
Copy link
Copy Markdown
Contributor

🔗 Related Issue

Closes #17


📝 What does this PR do?

Fixes the mobile layout breaking on screens narrower than 375px (iPhone SE). The sidebar was overlapping the chat panel and buttons were being clipped.

Root causes fixed:

  • No min-width on the root container — layout squished below 375px
  • ChatSession FAB (fixed bottom-4 left-4) overlapped the chat input area on mobile
  • Three 44×44px buttons in the input row were cramped at 375px
  • Export dropdown could clip past the left viewport edge
  • inert={true} was invalid JSX in Header.tsx and ChatSessionSidebar.tsx
  • FAB z-30 rendered above the Header backdrop (z-40), causing confusing tap targets
  • FAB bottom-4 clipped under the iOS home indicator on iPhone SE

The hamburger toggle, slide-in sheet, and backdrop were already correctly implemented — no new components were needed.


🗂️ Type of Change

  • 🐛 Bug fix
  • 🎨 UI / styling change

🧪 How was this tested?

  • Ran the frontend locally (npm run dev inside frontend/)
  • Tested at 375×667 viewport (iPhone SE) via browser DevTools
  • Tested at ≥768px (desktop) to confirm no regression

✅ Self-Review Checklist

  • My branch is based on dev, not main
  • I have not added any secrets / API keys
  • I have not modified main branch or any HuggingFace deployment config
  • My code follows the existing style (no unnecessary formatting changes)
  • I have updated relevant docs / comments if needed

@nancysangani nancysangani requested a review from param20h as a code owner June 5, 2026 08:24
@nancysangani
Copy link
Copy Markdown
Contributor Author

Hi @param20h Please review the PR when you get a chance. Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

fix: Mobile layout breaks on screens narrower than 375px

2 participants