feat(DATAGO-136946): Mobile responsive SAM UI#1520
Open
amir-ghasemi wants to merge 7 commits into
Open
Conversation
Cherry-picks mobile responsiveness fixes that landed on amir/mobile-schedule on top of feat-mobile, so they can ship as an independent PR ahead of the scheduled-tasks work. Includes: - AppLayout/ChatPage: h-screen → h-dvh and md:contents wrap so sidebars hide on mobile and the layout respects Android navigation bar - Header: tabs render in a separate row below the title on mobile so the title doesn't get squeezed when tabs are present - ChatInputArea: mobile two-row layout with rounded icon buttons - AttachmentCardShell: compact 64x64 thumbnail variant for mobile - StandaloneArtifactPreview: header buttons icon-only under md - AgentMeshCards / AgentDisplayCard: w-full sm:w-auto wrapper to fix circular width bug on narrow viewports - LayoutSelector: hide labels on mobile - ConfirmationDialog / ErrorDialog / FileDetailsDialog: responsive widths - SettingsDialog: list-or-detail mobile flow - VersionHistoryPage / PromptTemplateBuilder: mobile preview tabs and responsive footer - TaskTemplateBuilder: footer buttons stack vertically on mobile - RecentChatsPage: tab labels icon-only on mobile, flex-wrap filter row, max-w-4xl column, CalendarDays icon - index.css: safe-area-inset padding, scrollbar-hide utility - index.html: viewport-fit=cover Excluded TaskExecutionHistoryPage since its mobile fixes are intertwined with a larger scheduling refactor that doesn't belong in this PR.
✅ FOSSA Guard: Licensing (
|
✅ FOSSA Guard: Vulnerability (
|
# Conflicts: # client/webui/frontend/src/lib/components/agents/AgentMeshCards.tsx # client/webui/frontend/src/lib/components/agents/LayoutSelector.tsx # client/webui/frontend/src/lib/components/pages/ChatPage.tsx # client/webui/frontend/src/lib/components/pages/RecentChatsPage.tsx
Several pieces of mobile-responsive UI from the original mobile work
were dropped during the feat-mobile rebase and the cumulative cherry-
pick (which only captured changes after the merge point, not the initial
mobile commit). Restored here, plus a new Chats/Context tab split for
the Projects detail view.
Restored:
- MobileNavDrawer component (new file) and AppLayout wiring: state,
open-mobile-nav event listener, item builder for both legacy and new
nav modes, drawer render
- ChatPage mobile activity panel: isMobileSidePanelOpen state,
PanelRightIcon header button, key={isMobile ? "mobile" : "desktop"}
on ResizablePanelGroup, !isMobile guard on ResizableHandle + right
panel, full-screen Sheet rendering on mobile, ml-100 → md:ml-100
- SheetContent: showClose prop (default true) so the chat activity
sheet can manage its own close button
- GridCard: w-95 → w-full sm:w-95 with smaller mobile h-40/gap-3/py-3,
so Project/Prompt/Task/Artifact/Create cards collapse to one-per-row
full-width on mobile
New:
- ProjectDetailView: on mobile, replace the squished 60/40 split with
Chats / Context tabs styled to match the ChatSidePanel Files/Activity
pattern (icon + label, label hidden under 240px container width)
Apply the same four-pattern mobile fix to the three card pages: - Header buttons (Import/Refresh): wrap labels in `<span className="hidden sm:inline">` so the buttons row fits on a 320px viewport. - Card list wrapper padding: `pt-6 pb-6 pl-6` (no right padding) → `px-4 py-4 sm:pt-6 sm:pr-0 sm:pb-6 sm:pl-6` so mobile gets symmetric margins around cards. - Filter row: `flex items-center gap-2` → `flex flex-wrap items-center gap-2` so SearchInput, status/tags dropdown, and Clear All wrap to a second row instead of overflowing. - Status/Tags dropdown anchor: `left-0` → `right-0 sm:right-auto sm:left-0` so the 200px-wide popover extends inward from the trigger on mobile instead of past the viewport edge. - Card wrappers: each card wrapped in `<div className="w-full sm:w-auto">` so GridCard's `w-full sm:w-95` resolves to viewport width on mobile instead of falling back to circular sizing. Also drop `w-xs` from the Projects SearchInput (forced 320px width that overflowed mobile padding) and scope OnboardingBanner's `mr-6` to `sm:mr-6` so it doesn't double up with the new mobile right padding.
The shared SearchInput had `<div className="relative">` (no width constraint) wrapping `<input className="w-xs ...">`. In Tailwind v4, `w-xs` is not a valid utility — only `max-w-xs` is (via `--container-xs`). So the class silently did nothing and the input fell back to filling its parent, which had no width either, letting the bar span the whole row and overflow narrow viewports on the Projects, Prompts, Scheduled Tasks, and Agents pages. Fix: constrain the wrapper to `w-full max-w-xs` (fills the parent up to 320px) and make the input `w-full` (fills the wrapper).
Apply the same mobile-fit pattern to the Artifacts page: - ArtifactGridCard: fixed `w-[320px]` → `w-full sm:w-[320px]` so the tile fills viewport width on mobile and goes back to 320px on sm+. - Toolbar (search / project select / sort / count / internal toggle): `flex items-center` → `flex flex-wrap items-center` with mobile- friendly gap and right padding scoped to sm: only. The toolbar wraps across multiple lines on mobile instead of pushing past the right edge. - Container padding: `py-6 pl-6` (no right padding) → `px-4 py-4 sm:py-6 sm:pr-0 sm:pl-6`. Inner scroll area's `pr-4` scoped to sm:pr-4 so the mobile gap doesn't double up.
amir-ghasemi
changed the title
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This pull request introduces several UI improvements and mobile optimizations to the frontend, focusing on making the chat input area and agent selection more responsive and user-friendly across device types. The changes include enhanced mobile layouts, improved accessibility, and a more adaptive design for key components.
Mobile and Responsive Layout Improvements:
ChatInputAreacomponent to provide a distinct, optimized layout for mobile devices, including condensed spacing, larger touch targets for buttons, and a simplified placeholder text ("Ask anything") when on mobile. The arrangement of controls (attach, input, mic, send, agent select, context indicator) is now more mobile-friendly. (client/webui/frontend/src/lib/components/chat/ChatInputArea.tsx) [1] [2] [3] [4] [5] [6]h-dvh(dynamic viewport height) instead ofh-screen, ensuring that the UI fits better on mobile browsers with dynamic toolbars. (client/webui/frontend/src/AppLayout.tsx) [1] [2]index.htmlviewport meta tag withviewport-fit=coverto improve full-screen support on modern mobile devices. (client/webui/frontend/index.html)Accessibility and Usability Enhancements:
LayoutSelector, hid the "Layout:" label and layout names on small screens for a cleaner appearance, showing only icons on mobile. (client/webui/frontend/src/lib/components/agents/LayoutSelector.tsx) [1] [2]AgentMeshCardslayout by wrapping eachAgentDisplayCardin a responsive container, ensuring better alignment and wrapping on different screen sizes. (client/webui/frontend/src/lib/components/agents/AgentMeshCards.tsx)Visual Consistency:
AgentDisplayCardfor improved aesthetics. (client/webui/frontend/src/lib/components/agents/AgentDisplayCard.tsx) [1] [2]Hooks and Utilities:
useIsMobilehook in various components to enable conditional rendering and styling based on device type. (client/webui/frontend/src/lib/components/chat/ChatInputArea.tsx,client/webui/frontend/src/lib/components/chat/file/AttachmentCardShell.tsx) [1] [2]These changes collectively improve the user experience, especially on mobile devices, and ensure the UI adapts gracefully to different screen sizes and input methods.