fix(ui): prevent tag overlap in artifact list (#23110)#23148
Conversation
Signed-off-by: ipsitapp8 <ipsitapp8@gmail.com>
Refactored the tag rendering logic in the artifact list to use individual flexbox elements with wrapping instead of a single joint string. This prevents visual overlap and layout breaks when numerous tags are present. Signed-off-by: ipsitapp8 <ipsitapp8@gmail.com>
|
/cabotage set-label release-note/none |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #23148 +/- ##
==========================================
+ Coverage 66.35% 69.01% +2.65%
==========================================
Files 1073 820 -253
Lines 117705 103347 -14358
Branches 2965 0 -2965
==========================================
- Hits 78108 71320 -6788
+ Misses 35297 28080 -7217
+ Partials 4300 3947 -353
Flags with carried forward coverage won't be shown. Click here to find out more. 🚀 New features to boost your workflow:
|
|
Hi maintainers, |
|
@ipsitapp8 Can you please provide the before/after change screenshot? |
|
This PR is being marked stale due to a period of inactivty. If this PR is still relevant, please comment or remove the stale label. Otherwise, this PR will close in 30 days. |
Signed-off-by: ipsitapp8 <ipsitapp8@gmail.com>
There was a problem hiding this comment.
Pull request overview
Fixes artifact-list tag overlap by rendering tags as wrapping elements.
Changes:
- Adds flex-based wrapping styles for tags.
- Refactors tag rendering into individual spans.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
artifact-list-tab.component.scss |
Adds tag wrapping and sizing styles. |
artifact-list-tab.component.html |
Changes artifact tag rendering. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| </clr-dg-cell> | ||
| } | ||
| <clr-dg-cell class="center"> | ||
| fix/tag-overlap-23110 |
| <div class="tags-wrapper" *ngIf="artifact.tags"> | ||
| <clr-tooltip class="width-p-100"> | ||
| <div clrTooltipTrigger class="center"> | ||
| <div class="center width-p-100"> | ||
| <div class="tags-wrapper" #tagsSpan> |
| isEllipsisActive(tagsSpan) ) { | ||
| <span>({{ artifact?.tagNumber }} )</span> | ||
| } | ||
| main |
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> Signed-off-by: ipsitapp8 <ipsitapp8@gmail.com>
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 2 out of 2 changed files in this pull request and generated no new comments.
Comments suppressed due to low confidence (3)
src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/artifact-list-tab.component.html:326
- This branch label is literal template text, so it will be displayed in every artifact's tag cell. Remove this leftover conflict artifact.
fix/tag-overlap-23110
src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/artifact-list-tab.component.html:331
- The new tag trigger was prepended without replacing the existing trigger below, and these newly opened
div/clr-tooltipelements are never closed. This leaves both tag renderers nested in one cell and makes the template structure invalid. Reconcile the two implementations into one trigger, close its wrappers, and retain the existing tooltip content.
<div class="tags-wrapper" *ngIf="artifact.tags">
<clr-tooltip class="width-p-100">
<div clrTooltipTrigger class="center">
<div class="center width-p-100">
<div class="tags-wrapper" #tagsSpan>
src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/artifact-list-tab.component.html:355
- This leftover branch label is literal template text and will appear in the tag cell. Remove it as part of resolving the duplicated tag-rendering block.
main
Comprehensive Summary of your change
This PR resolves issue #23110 by fixing the tag layout in the artifact list datagrid.
Previously, tags were joined into a single string which caused horizontal overflow and visual overlap with other columns when an artifact had numerous tags. I have refactored the rendering to use individual span elements within a display: flex; flex-wrap: wrap container.
This ensures:
Tags wrap cleanly to multiple lines.
Row height expands naturally to fit content.
No string-joining logic is used in the template, satisfying modern Harbor UI standards.
Layout remains stable in narrow viewports.
Issue being fixed
Fixes #23110