fix(plugin-id/ui): keep user list group chips on a single line#28
Merged
Conversation
Per Fabrice's review (18 mai 13h30): when a user has many groups, the chips column was wrapping onto multiple lines, breaking vertical alignment across rows in the user list. Constrain the chips container to single-line (display: flex; flex-wrap: nowrap; overflow: hidden) so chips overflow horizontally instead of pushing rows down.
|
|
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.
Keep the group chips on a single line in the user list, so vertical
alignment stays consistent across rows regardless of how many groups
each user belongs to.
Fix
Wrap the
#item.groupsslot of LigojDataTableServer in a<div class="groups-cell">with scoped CSS:display: flex;
align-items: center;
flex-wrap: nowrap;
overflow: hidden;
white-space: nowrap;
Chips that exceed the column width are now hidden on the right by
overflow:hidden instead of wrapping onto a 2nd line.
Files
1 file, +17/-4 — UserListView.vue.
Note on validation
Local dev LDAP has only one group and no multi-group users, so the
original wrap couldn't be reproduced directly. Validation was done by
manually assigning Sample Group to cli10 and resizing the Chrome
window to force truncation (visible: chip "Sample Grou" cut off
horizontally instead of wrapping). The canonical CSS fix is low-risk
for this single-cell concern — to revalidate on a richer environment
if needed.