Merged
Conversation
Technical fixes: - Add React keys to List.js via React.cloneElement (fixes console warning) - Forward ref properly in User component (React.forwardRef) - Memoize callbacks (useCallback/useMemo) to prevent unnecessary re-renders - Move ACTIONS constant outside component to avoid recreation Visual improvements: - Reduce avatar size from 48px to 32px (configurable via size prop) - Compact user list items with proper text truncation - Role badges with color-coded backgrounds (owner/admin/contributor) - Fixed-width panel (480px) instead of 75% viewport width - Proper button styling with borders, hover states, and danger/primary variants - Role select with consistent sizing - Self-role shown as subtle label next to project name Cleanup: - Extract MemberManagement styles into dedicated MemberManagement.css - Extract User styles into dedicated User.css - Remove inline styles from MemberManagement.js and User.js - Remove unused CSS classes from ProjectList.css - Remove unnecessary Card/useServices dependency from User component
- Fixed panel size (400x420px) — no vertical jumping on search results - Reduced all paddings/gaps for a compact, professional look - Smaller font sizes throughout (13/12/11/10px) - Avatar 28px instead of 32px - Thinner margins to panel edges (12px/8px/4px)
Smaller padding to panel edges (8px toolbar, 4px actions, 2px list) so more space goes to the actual content. Avatars back to 36px.
Panel adapts to window size instead of fixed pixels. Font sizes back to comfortable reading sizes (15/13/11px).
Toolbar padding 14px/16px, actions 8px/16px, list area 12px. User items 6px/8px padding with 10px gap. Search margin 8px bottom.
Title 18px, body text 16px, secondary text 13px — consistent with the 16px base used by f73b-button and card-title in ProjectList.
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
2 participants
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.
Problem
Changes
Technical
React.cloneElementUsercomponent usesReact.forwardReffor proper ref forwardinguseCallback/useMemo) to prevent unnecessary re-rendersCard/useServicesdependency from User componentVisual
Cleanup
MemberManagement.css,User.csssizeprop (default 32px)