Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
… auto-close on view switch - Add ARIA role=complementary and aria-label to ViewConfigPanel - Add focus management when panel opens (ref + useEffect) - Add responsive mobile overlay (full-width on mobile, w-72 on desktop) - Auto-close config panel when switching view tabs in ObjectView - Add tests for ARIA attributes and responsive CSS classes - Update ROADMAP.md and ROADMAP_CONSOLE.md with Phase 20 improvements Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
github-actions
bot
added
documentation
Copilot
AI
changed the title
[WIP] Optimize edit view page to support inline configuration panel
feat: ViewConfigPanel responsive overlay, ARIA accessibility, auto-close on view switch
Feb 20, 2026
Contributor
✅ Console Performance Budget
📦 Bundle Size Report
Size Limits
|
Contributor
|
@copilot fix ci build and test errors |
…n form.sections.columns
The `defineStack()` in @objectstack/spec transforms `columns: '2'` (string)
to `columns: 2` (number) via ZodPipe. When `objectstack compile` CLI then
runs safeParse again on the already-transformed data, the number `2` fails
the string enum validation expecting "1"|"2"|"3"|"4".
Fix: pass `{ strict: false }` to `defineStack()` in the CRM example config,
deferring validation to the compile CLI's single safeParse pass.
Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
Contributor
Author
Fixed in Fix: pass |
Contributor
There was a problem hiding this comment.
Pull request overview
This PR enhances the ViewConfigPanel component to provide a responsive, accessible inline view configuration experience similar to Airtable. The changes improve mobile UX by implementing a full-screen overlay on small screens while maintaining the existing inline sidebar on desktop, add proper ARIA accessibility attributes, and automatically close the panel when users switch between views.
Changes:
- Enhanced ViewConfigPanel with responsive CSS classes (absolute full-width overlay on mobile, relative sidebar on desktop)
- Added ARIA accessibility attributes (role="complementary", aria-label, tabIndex) and focus management
- Implemented auto-close behavior when switching views in ObjectView
- Added workaround comment for CRM example Zod double-parse bug
- Updated ROADMAP documentation to reflect Phase 20 completion
Reviewed changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| apps/console/src/components/ViewConfigPanel.tsx | Added responsive positioning (absolute → relative breakpoint), ARIA attributes (role, aria-label, tabIndex), and focus management via useRef + useEffect |
| apps/console/src/components/ObjectView.tsx | Added auto-close logic for ViewConfigPanel when handleViewChange is called (line 127) |
| apps/console/src/tests/ViewConfigPanel.test.tsx | Added 2 new tests verifying ARIA attributes and responsive CSS classes (29 total tests now) |
| examples/crm/objectstack.config.ts | Added { strict: false } option with explanatory comment about Zod double-parse bug workaround |
| ROADMAP_CONSOLE.md | Updated Phase 20 description with new features (responsive overlay, ARIA, auto-close) and added v2.1.0 milestone |
| ROADMAP.md | Updated Inline View Config Panel feature description with new capabilities |
Comment on lines
+101
to
+106
| // Focus the panel when it opens for keyboard accessibility | ||
| useEffect(() => { | ||
| if (open && panelRef.current) { | ||
| panelRef.current.focus(); | ||
| } | ||
| }, [open]); |
There was a problem hiding this comment.
The focus management effect in useEffect is not covered by tests. Consider adding a test to verify that the panel receives focus when opened, which is important for keyboard navigation and accessibility. This can be done by checking if panelRef.current.focus() was called or by verifying focus programmatically in the test.
Comment on lines
+126
to
+127
| // Auto-close the config panel when switching views | ||
| setShowViewConfigPanel(false); |
There was a problem hiding this comment.
The auto-close behavior when switching views is not covered by tests. Consider adding a test in ViewSwitching.test.tsx or ObjectView.test.tsx to verify that showViewConfigPanel is set to false when handleViewChange is called. This ensures the panel closes automatically when users switch between views, which is an important UX behavior mentioned in the PR description.
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
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.
objectstack compileZod double-parse bug onform.sections.columnsOriginal prompt
💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.