80 fix views buttons#99
Merged
Merged
Conversation
nazarli-shabnam
added
bug
Closed
Contributor
There was a problem hiding this comment.
Pull request overview
This PR updates the Workspace Views “Filters/Display/Add view” toolbar and related dropdown panels to behave better in constrained viewports (especially inside modals), addressing Issue #80 around the “Create views” buttons and panels.
Changes:
- Adjusts Filters/Display dropdown panel sizing to be more responsive (viewport-width aware + smaller default max heights).
- Updates dropdown positioning/z-index behavior to work above modal overlays and adds attempted viewport-constrained positioning.
- Simplifies Workspace Views header dropdown-open state so only one toolbar dropdown is open at a time, and closes toolbar dropdowns when opening “Add view”.
Reviewed changes
Copilot reviewed 8 out of 8 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| ui/src/components/workspace-views/WorkspaceViewsFiltersPanel.tsx | Removes per-panel maxHeight style in favor of dropdown panel constraints. |
| ui/src/components/workspace-views/WorkspaceViewsFiltersDropdown.tsx | Updates dropdown panel sizing (responsive width + new max-height). |
| ui/src/components/workspace-views/WorkspaceViewsEllipsisMenu.tsx | Raises z-index and adds attempted vertical flipping/maxHeight behavior for the ellipsis menu panel. |
| ui/src/components/workspace-views/WorkspaceViewsDisplayPanel.tsx | Adds scrolling behavior for display-property buttons within constrained panels. |
| ui/src/components/workspace-views/WorkspaceViewsDisplayDropdown.tsx | Updates dropdown panel sizing (responsive width + new max-height). |
| ui/src/components/workspace-views/CreateViewModal.tsx | Resets open dropdown panel state when the modal opens/closes; updates panel sizing. |
| ui/src/components/work-item/Dropdown.tsx | Raises dropdown z-index and adds attempted viewport-aware positioning and maxHeight constraints. |
| ui/src/components/layout/PageHeader.tsx | Consolidates Filters/Display open state and closes toolbar dropdowns before opening Create View modal. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+70
to
+73
| const triggerRect = triggerRef.current.getBoundingClientRect(); | ||
| const panelRect = panelRef.current?.getBoundingClientRect(); | ||
| const panelHeight = panelRect?.height ?? 0; | ||
| const panelWidth = panelRect?.width ?? 0; |
Comment on lines
73
to
+82
| const rect = triggerRef.current.getBoundingClientRect(); | ||
| const panelRect = panelRef.current?.getBoundingClientRect(); | ||
| const panelHeight = panelRect?.height ?? 0; | ||
| const availableBelow = window.innerHeight - rect.bottom - VIEWPORT_PADDING - PANEL_GAP; | ||
| const availableAbove = rect.top - VIEWPORT_PADDING - PANEL_GAP; | ||
| let top = rect.bottom + PANEL_GAP; | ||
| if (panelHeight > 0 && availableBelow < panelHeight && availableAbove > availableBelow) { | ||
| top = Math.max(VIEWPORT_PADDING, rect.top - panelHeight - PANEL_GAP); | ||
| } | ||
| const maxHeight = Math.max(120, Math.max(availableBelow, availableAbove)); |
Comment on lines
27
to
33
| <div className="flex flex-col"> | ||
| <div className="border-b border-(--border-subtle) bg-(--bg-surface-1) p-3"> | ||
| <p className="text-xs font-medium text-(--txt-secondary)">Display Properties</p> | ||
| </div> | ||
| <div className="flex flex-1 flex-wrap gap-2 p-3"> | ||
| <div className="flex flex-1 flex-wrap content-start gap-2 overflow-y-auto p-3"> | ||
| {DISPLAY_PROPERTY_KEYS.map((key) => { | ||
| const selected = display.properties.includes(key); |
| top: position.top, | ||
| ...(position.left !== undefined && { left: position.left }), | ||
| ...(position.right !== undefined && { right: position.right }), | ||
| ...(position.maxHeight !== undefined && { maxHeight: position.maxHeight }), |
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.
Summary
Linked issues
Closes #
Type of change
feat:) — user-visible new capabilityfix:) — corrects broken behaviorrefactor:) — no behavior change, internal onlyperf:) — measurable improvementdocs:) — README / CLAUDE.md / planning docs onlytest:) — adds or corrects testschore:) — deps, tooling, CI, formattingstyle:) — visual / theming polish onlySurface
api/)ui/)api/migrations/)What changed
Why this approach
Database / migrations
api/migrations/NNNNNN_<name>.up.sqlAND matching.down.sqldatabase.RunMigrationson startupBreaking changes
Test plan
npm run validate(root) — typecheck + lint + prettier + go vet + go test[ ] Manual smoke test of the affected flow:
Screenshots / recordings (UI changes)
Rollout notes
Checklist
closes #80
--no-verifybypass)internal/config/config.goand documented above.envvalues committed