Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Publisher][Admin Panel] Fit 3 team member cards in a row #1598

Merged
merged 2 commits into from
Nov 29, 2024

Conversation

nasaownsky
Copy link
Collaborator

@nasaownsky nasaownsky commented Nov 26, 2024

Tweak team members card and modal sizes to fit cards better in smaller screens

Type of change

All pull requests must have at least one of the following labels applied (otherwise the PR will fail):

Label Description
Type: Bug non-breaking change that fixes an issue
Type: Feature non-breaking change that adds functionality
Type: Breaking Change fix or feature that would cause existing functionality to not work as expected
Type: Non-breaking refactor change addresses some tech debt item or prepares for a later change, but does not change functionality
Type: Configuration Change adjusts configuration to achieve some end related to functionality, development, performance, or security
Type: Dependency Upgrade upgrades a project dependency - these changes are not included in release notes

Related issues

closes #1560

Checklists

Development

This box MUST be checked by the submitter prior to merging:

  • Double- and triple-checked that there is no Personally Identifiable Information (PII) being mistakenly added in this pull request

These boxes should be checked by the submitter prior to merging:

  • Tests have been written to cover the code changed/added as part of this pull request

Code review

These boxes should be checked by reviewers prior to merging:

  • This pull request has a descriptive title and information useful to a reviewer
  • This pull request has been moved out of a Draft state, has no "Work In Progress" label, and has assigned reviewers
  • Potential security implications or infrastructural changes have been considered, if relevant

@nasaownsky
Copy link
Collaborator Author

nasaownsky commented Nov 26, 2024

After tweaking different sizes I think these ones would be the best choice for our needs!

@nichelle-hall
Copy link
Contributor

I don’t know enough about the mechanics of fitting three cards on the screen to provide feedback on that aspect. However, on my MacBook Pro 16-inch in full-screen mode, it looks like there’s room for up to four cards to fit. I’m leaving the PR open for Mahmoud to review when he gets back.

Screenshot 2024-11-26 at 10 49 33 AM

@nasaownsky
Copy link
Collaborator Author

I don’t know enough about the mechanics of fitting three cards on the screen to provide feedback on that aspect. However, on my MacBook Pro 16-inch in full-screen mode, it looks like there’s room for up to four cards to fit.

Hmm, strange -- on the same system it fits 4 cards, I specifically tweaked it this way. I'll return to testing again.

@nasaownsky
Copy link
Collaborator Author

I update fitting method -- now it should be much smoother and should match the requirement of 3 cards per row in 1400px-ish widths. @mxosman @nichelle-hall

Copy link
Contributor

@mxosman mxosman left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah - love this - feels very smooth! Thank you for your eyes & suggestion, @nichelle-hall and for the elegant solution, @nasaownsky! 😎

display: flex;
flex-wrap: wrap;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh nice! Always forget we can just do it this way. 👏

@nasaownsky nasaownsky merged commit 92fa396 into main Nov 29, 2024
7 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Publisher][Admin Panel] Team Member & Roles Tab: Fit 3 team member cards in a row
3 participants