feat: responsive layout foundation, mobile tables, and filter drawer APIs#42
feat: responsive layout foundation, mobile tables, and filter drawer APIs#42axsapronov wants to merge 15 commits into
Conversation
Single source for isMobile, isTablet, isIconOnlyToolbar and related layout flags. Refactors useWindowResize to delegate to getResponsiveLayout.
Adds getDrawerWidth helpers and filterResponsiveColumns for hideBelow column metadata on narrow viewports.
Introduces drawer-based filter state and responsive FilterBar toolbar layout with inline filters and compact filters button.
Provides a consistent label+control wrapper for filter drawer panels and fixes FilterForm wrapper height when the drawer is closed.
Adds IconTextButton, PageHeaderTitle, ResponsiveSegmented, ResponsiveColGrid and ResponsiveTabsExtra for compact mobile toolbars and page headers.
Panels can start collapsed on narrow viewports without syncing collapse state on every window resize.
Renders list rows as cards on mobile with mobileTitle and mobileCard column metadata and responsive column visibility.
Wraps ant Design Table with mobile card rendering and horizontal scroll on tablet, reusing Seal Table mobile card styles.
Icon-only dropdown actions, tooltip wrapper for disabled items, and status tag overflow fixes; adds ambient type declarations for tinycolor and bibtex.
|
Examples of mobile UI: 
|
|
Exampes of desktop UI: 
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces comprehensive responsive design enhancements, including a new mobile card-based table view (AntdResponsiveTable and MobileCards), responsive layout hooks, and compact toolbar layouts for smaller viewports. The review feedback identifies critical issues in the mobile table implementation, such as selection loss across paginated pages, the incorrect selection of disabled rows during 'Select All', and TypeScript compilation errors when handling nested dataIndex paths. Additionally, feedback points out a bug in CellContent where editing nested properties fails to update correctly, and notes that the useResponsiveLayout hook is now redundant and can be simplified.
Important
The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.
Extract selection helpers with record cache and selectable row keys so mobile card rowSelection keeps rows from other pages and skips disabled rows on select all.
Add tests for array dataIndex paths and use lodash-compatible casts so nested column fields resolve correctly in mobile card rendering.
Add buildSubmittedRow helper and use it on cell submit so nested paths update the correct field instead of creating a flat comma-separated key.
Remove duplicate getResponsiveLayout calculation now that useWindowResize already returns the full responsive layout flags.
ResponsiveSegmented, ResponsiveColGrid, and ResponsiveTabsExtra were implemented but missing from the barrel export, breaking gpustack-ui consumers that import them from @gpustack/core-ui.
axsapronov
force-pushed
the
mobile-fixes
branch
2 times, most recently
from
c409e46 to
8ef8c95
Compare
1 participant
Summary
This PR adds the shared responsive infrastructure consumed by gpustack-ui's mobile/tablet UI work. It introduces a single breakpoint model, drawer/filter patterns for list pages, mobile table rendering, and compact toolbar primitives.
THIS IS PART OF BIG PR - gpustack/gpustack-ui#1258
What's included
Responsive foundation
getResponsiveLayout()/useResponsiveLayout()— unified breakpoints and flags (isMobile,isTablet,isIconOnlyToolbar, etc.)useWindowResizeto delegate togetResponsiveLayoutgetDrawerWidth()andfilterResponsiveColumns()helpersFilters
useFilterDrawer— drawer state, active filter count, clear helpersFilterBarlayout (inlineFilters,collapseInlineFilters, compact filters button)FilterFormField— labeled fields for side filter drawersToolbar / page header components
IconTextButton,PageHeaderTitle,ResponsiveSegmentedResponsiveColGrid,ResponsiveTabsExtraTables
Table— mobile card layout withmobileTitle/mobileCard/hideBelowcolumn metadataAntdResponsiveTable— drop-in wrapper for ant DesignTablewith the same mobile card behaviorOther
useInitialCollapsed— viewport-aware initial panel collapse (no resize sync)DropdownButtonsandStatusTagsmall-screen fixespackage-lock.jsonaddedCommit breakdown
feat(responsive): centralize breakpoints in getResponsiveLayoutfeat(utils): add drawer width and responsive column filteringfeat(filters): add useFilterDrawer and responsive FilterBar layoutfeat(filter-form): add FilterFormField for labeled drawer fieldsfeat(components): add responsive toolbar and page header primitivesfeat(hooks): add useInitialCollapsed for viewport-aware panelsfeat(table): add mobile card layout to Seal Tablefeat(table): add AntdResponsiveTable drop-in wrapperfix(components): improve DropdownButtons and StatusTag on small screenschore: add package-lock.jsonNotes for maintainers
Test plan
npm test/ unit tests pass for new utilities and hooksFilterBar+useFilterDrawer+FilterFormFieldrender correctly in Storybook or a local consumerTableswitches to card layout below mobile breakpointAntdResponsiveTablerenders cards on mobile and horizontal scroll on tabletIconTextButton/DropdownButtonsshow icon-only mode belowlggetResponsiveLayoutreturns expected flags at 767px, 991px, 1199px, 1920px