From e9e0a4e8131216bb9ffa59a6a4bc8cace3719a8e Mon Sep 17 00:00:00 2001 From: viettranx Date: Wed, 11 Mar 2026 14:27:54 +0700 Subject: [PATCH] feat(ui): mobile UX improvements for web dashboard (#141) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Replace h-screen with h-dvh for correct mobile viewport height - Fix input font-size to 16px on mobile preventing iOS Safari auto-zoom - Add safe area padding for notched devices (Dynamic Island, home indicator) - Expand touch targets for icon buttons to ≥44px on touch devices - Make dialogs full-screen on mobile with slide-up animation - Add virtual keyboard detection for chat input positioning - Smooth auto-scroll for incoming messages, instant scroll on user send - Add overflow-x-auto to table pages for mobile horizontal scroll - Fix grid layouts to stack on mobile (grid-cols-1 sm:grid-cols-2) - Safe-area-aware toast positioning - Landscape compact mode for phone landscape orientation --- ui/web/index.html | 2 +- ui/web/src/components/chat/chat-input.tsx | 7 ++-- ui/web/src/components/layout/app-layout.tsx | 4 +-- ui/web/src/components/layout/topbar.tsx | 2 +- .../shared/provider-model-select.tsx | 2 +- .../src/components/shared/require-setup.tsx | 2 +- ui/web/src/components/ui/dialog.tsx | 4 ++- ui/web/src/components/ui/select.tsx | 2 +- ui/web/src/components/ui/toaster.tsx | 2 +- ui/web/src/hooks/use-auto-scroll.ts | 16 ++++++---- ui/web/src/hooks/use-virtual-keyboard.ts | 28 ++++++++++++++++ ui/web/src/index.css | 32 +++++++++++++++++++ .../media-provider-chain-form.tsx | 4 +-- .../channel-detail/channel-managers-tab.tsx | 6 ++-- ui/web/src/pages/channels/channels-page.tsx | 4 +-- ui/web/src/pages/chat/chat-page.tsx | 4 ++- ui/web/src/pages/chat/chat-thread.tsx | 2 +- .../config/sections/ai-defaults-section.tsx | 14 ++++---- .../config/sections/bindings-section.tsx | 2 +- .../config/sections/channels-section.tsx | 4 +-- .../pages/config/sections/cron-section.tsx | 2 +- .../pages/config/sections/quota-section.tsx | 2 +- .../config/sections/telemetry-section.tsx | 4 +-- .../config/sections/tools-exec-section.tsx | 2 +- .../config/sections/tools-profile-section.tsx | 2 +- .../config/sections/tools-web-section.tsx | 2 +- ui/web/src/pages/cron/cron-detail-page.tsx | 2 +- .../pages/custom-tools/custom-tools-page.tsx | 4 +-- .../pages/delegations/delegations-page.tsx | 4 +-- ui/web/src/pages/login/login-layout.tsx | 2 +- ui/web/src/pages/mcp/mcp-page.tsx | 4 +-- ui/web/src/pages/memory/kg-entities-tab.tsx | 4 +-- .../pages/memory/kg-entity-detail-dialog.tsx | 6 ++-- ui/web/src/pages/memory/memory-page.tsx | 4 +-- .../pending-messages-page.tsx | 4 +-- ui/web/src/pages/setup/setup-layout.tsx | 2 +- ui/web/src/pages/skills/skills-page.tsx | 4 +-- .../task-sections/task-detail-dialog.tsx | 2 +- ui/web/src/pages/tts/tts-page.tsx | 8 ++--- 39 files changed, 139 insertions(+), 68 deletions(-) create mode 100644 ui/web/src/hooks/use-virtual-keyboard.ts diff --git a/ui/web/index.html b/ui/web/index.html index 2e00a5f4..8a30c15f 100644 --- a/ui/web/index.html +++ b/ui/web/index.html @@ -3,7 +3,7 @@ - + GoClaw Dashboard diff --git a/ui/web/src/components/chat/chat-input.tsx b/ui/web/src/components/chat/chat-input.tsx index 7f7f45cd..1a450dce 100644 --- a/ui/web/src/components/chat/chat-input.tsx +++ b/ui/web/src/components/chat/chat-input.tsx @@ -44,7 +44,10 @@ export function ChatInput({ onSend, onAbort, isRunning, disabled }: ChatInputPro }, []); return ( -
+