Skip to content

fix(app): ensure metric list labels are fully visible#26527

Merged
AlexGaillard merged 14 commits intodirectus:mainfrom
Prasad7007:fix/26402-metric-list-panel-labels
Feb 11, 2026
Merged

fix(app): ensure metric list labels are fully visible#26527
AlexGaillard merged 14 commits intodirectus:mainfrom
Prasad7007:fix/26402-metric-list-panel-labels

Conversation

@Prasad7007
Copy link
Contributor

Scope

What's changed:

directus_contribution.mp4
  • Refactored panel-metric-list.vue to separate the visual bar from the text content.
  • Updated layout to use a flex container that tracks the bar's width but expands (min-inline-size: max-content) if the text is longer than the bar.
  • Added a gap between the label and value, and ensured the numeric value does not shrink.
  • This ensures labels are always fully visible (not clipped by the bar) and "stick" to the end of the bar when space allows.

Potential Risks / Drawbacks

  • Minimal risk; strictly a CSS/Layout adjustment for the Metric List panel.
  • Theoretically, extremely long strings might affect layout, but text-overflow: ellipsis is preserved for the label.

Tested Scenarios

  • Verified metric items with short values (small bar width) to ensure text renders fully on top of the bar.
  • Verified metric items with long values (wide bar width) to ensure text aligns with the end of the bar.
  • Verified long labels to ensure they don't collapse the numeric value.

Review Notes / Questions

  • None.

Checklist

  • Added or updated tests
  • Documentation PR created here or not required
  • OpenAPI package PR created here or not required

Fixes #26402

@Prasad7007
Copy link
Contributor Author

@AlexGaillard Hi, can you review this PR?

@AlexGaillard
Copy link
Member

@Prasad7007 We will when we're able to free up some time. Just as a quick note, you seem to have two changesets, please delete one of them. 👍

@Prasad7007 Prasad7007 force-pushed the fix/26402-metric-list-panel-labels branch from fc2ae69 to 8d86fb7 Compare January 28, 2026 06:10
@alvarosabu
Copy link
Contributor

Hi @Prasad7007 thanks a lot for this PR, I received some feedback from our design team, so I will accommodate the design myself so you dont need to worry about 😊

@Prasad7007
Copy link
Contributor Author

@alvarosabu Sure, thanks!

Copy link
Member

@AlexGaillard AlexGaillard left a comment

Choose a reason for hiding this comment

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

🆒🫘 TYVM @Prasad7007

@AlexGaillard AlexGaillard merged commit c5965cc into directus:main Feb 11, 2026
66 checks passed
@github-actions github-actions bot added this to the Next Release milestone Feb 11, 2026
@Prasad7007
Copy link
Contributor Author

@AlexGaillard This is my first open-source contribution thanks to you 🛐

@AlexGaillard
Copy link
Member

Don't thank me, thank @alvarosabu 🙏

@Prasad7007
Copy link
Contributor Author

@AlexGaillard Yes you are right. @alvarosabu thanks a lot 🙏

@alvarosabu
Copy link
Contributor

In really happy to hear is your first contribution @Prasad7007 . Welcome to Open Source 😊

AlexGaillard added a commit that referenced this pull request Feb 18, 2026
* fix(app): ensure metric list labels are fully visible

* Add Prasad7007 to contributors list

* chore: add changeset

* style: fix prettier issues

* chore: add changeset

* Resolved git conflict

* chore: resolved conflict

* chore: Deleted extra changeset file

* Update metric list panel to match new design

* Remove unused imports and variables in metric list panel component

* Update default color in metric list panel component for improved theming

* Update .changeset/wacky-stamps-brake.md

---------

Co-authored-by: Alvaro Saburido <[email protected]>
Co-authored-by: Alex Gaillard <[email protected]>
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.

Can't see labels in the metric list panel

3 participants