UI Pixel perfection, Mobile responsiveness: Project edit, Project details, Project creation pages - #103
Conversation
📝 WalkthroughWalkthroughThis change updates workspace project UI styling. It refines dialogs, wizard steps, contributor controls, task panels, project detail pages, project creation layouts, and responsive mobile behavior. ChangesWorkspace UI styling
Estimated code review effort: 3 (Moderate) | ~20 minutes Possibly related PRs
Suggested reviewers: Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
ESLint install timed out. The project may have too many dependencies for the sandbox. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 7
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
pages/workspace/[id]/projects/create.vue (1)
715-730: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick winSet the positioned ancestor for the wizard shell.
.project-create-pageis the shell’s wrapper, but it does not establish a containing block while.project-create-shellusesposition: absolutewithtop: 0andz-index: 9999. This makes the shell position relative to a higher ancestor such as the viewport and cover UI like the navbar. Addposition: relativeto.project-create-pageto keep the wizard page-local.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@pages/workspace/`[id]/projects/create.vue around lines 715 - 730, Add position: relative to the .project-create-page rule so the absolutely positioned .project-create-shell is anchored to the wizard wrapper rather than a higher ancestor, preserving the page-local top and z-index behavior.
🧹 Nitpick comments (1)
components/project-wizard/StatusDialog.vue (1)
55-55: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winKeep the button style hooks consistent.
Lines [55] and [64] remove
project-wizard-status-dialog-secondaryandproject-wizard-status-dialog-primary, but Lines [223-227] and [243-246] still define styles for those classes. Themin-width,min-height, and mobile width rules no longer apply.If Bootstrap sizing is intentional, remove the stale selectors. Otherwise, restore the component-specific classes.
Also applies to: 64-64
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@components/project-wizard/StatusDialog.vue` at line 55, Restore the project-wizard-status-dialog-secondary and project-wizard-status-dialog-primary classes on the corresponding buttons in StatusDialog.vue so the existing min-width, min-height, and mobile width styles remain effective; do not remove the still-used selectors.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@components/AppIcon.vue`:
- Line 32: Scope the .material-icons styling in AppIcon.vue so the
margin/alignment adjustment applies only to the intended icon layout rather than
every matching span. Update the AppIcon component’s selector or add a dedicated
variant class, preserving default styling for unrelated Material Icons.
In `@components/project-wizard/StatusDialog.vue`:
- Around line 197-200: Update the mobile override for
.project-wizard-status-dialog-title to use the intended 20px title size instead
of 1.7rem, ensuring it does not override the new base sizing on small screens.
In `@components/workspace-project-details/ContributorsTab.vue`:
- Around line 583-600: Update the responsive styles for
.project-detail-contributors-role-actions and/or
.project-detail-contributors-role-readonly at the sm breakpoint so the action
row can wrap or the readonly role control can shrink within the available card
width. Preserve the existing one-column layout while preventing overflow on
narrow viewports.
In `@components/workspace-project-details/SelectedTaskBar.vue`:
- Around line 209-220: Re-enable the mobile breakpoint styles for
.project-detail-task-action-summary: set its width to 100%, change the flex
direction to column, align items to flex-start, and use the intended 1rem gap.
Keep the existing desktop layout unchanged.
- Around line 204-207: Update the project detail scroll container to add bottom
padding whenever the selected-task action bar is visible, preventing final task
rows or tab content from being obscured. In the .project-detail-task-action-bar
styles, keep the fixed behavior for lg and below while explicitly anchoring it
to the viewport bottom and assigning an appropriate z-index.
In `@pages/workspace/`[id]/projects/[projectId]/edit.vue:
- Line 1190: Update the first, last, and only-child border-radius rules
associated with .project-edit-search-results to 7px or calc(8px - 1px), matching
the container’s new 8px radius while preserving the existing child-specific
styling.
- Around line 1581-1584: Update the mobile .project-edit-nav styling to preserve
vertical, full-width navigation at md and below: retain a one-column grid or
flex layout, or make each .project-edit-nav-item display block with width: 100%,
instead of relying on display: block on the container alone.
---
Outside diff comments:
In `@pages/workspace/`[id]/projects/create.vue:
- Around line 715-730: Add position: relative to the .project-create-page rule
so the absolutely positioned .project-create-shell is anchored to the wizard
wrapper rather than a higher ancestor, preserving the page-local top and z-index
behavior.
---
Nitpick comments:
In `@components/project-wizard/StatusDialog.vue`:
- Line 55: Restore the project-wizard-status-dialog-secondary and
project-wizard-status-dialog-primary classes on the corresponding buttons in
StatusDialog.vue so the existing min-width, min-height, and mobile width styles
remain effective; do not remove the still-used selectors.
🪄 Autofix
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 7377d84e-05ec-4171-bcab-f622b66222ac
📒 Files selected for processing (15)
components/AppConfirmationDialog.vuecomponents/AppIcon.vuecomponents/project-wizard/StatusDialog.vuecomponents/project-wizard/steps/AreaOfInterestStep.vuecomponents/project-wizard/steps/ReviewStep.vuecomponents/project-wizard/steps/SettingsStep.vuecomponents/workspace-project-details/AddContributorDialog.vuecomponents/workspace-project-details/ContributorsTab.vuecomponents/workspace-project-details/SelectedTaskBar.vuecomponents/workspace-project-details/TaskLockControl.vuecomponents/workspace-project-details/TaskSetupPanel.vuecomposables/useProjectEditMembers.tspages/workspace/[id]/projects/[projectId]/edit.vuepages/workspace/[id]/projects/[projectId]/index.vuepages/workspace/[id]/projects/create.vue
💤 Files with no reviewable changes (1)
- components/project-wizard/steps/ReviewStep.vue
2 participants
Summary