Frontend : Fixed Activity-Component responsiveness

[greedy-wudpeckr]

Summary

This PR fixes Activity Component Text Overflow on Small Screens

Related Issue

Fixes #4472

Screenshots (if applicable)

Before :

After :

Notes for the Reviewer

• [e.g., This touches the i18n layer, so please check language consistency.]

[k8s-ci-robot]

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by: greedy-wudpeckr
Once this PR has been reviewed and has the lgtm label, please assign joaquimrocha for approval. For more information see the Code Review Process.

The full list of commands accepted by this bot can be found here.

Details

Needs approval from an approver in each of these files:

• OWNERS

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[illume]

Interesting, thanks!

Can you please check the commit message guideline documentation? Have a look at the git log --oneline commit messages for examples.

The text looks a bit small. With the text overflow at least people can read all the text. It might be increasing the size of the boxes is better? If the text is cut off, there should be some way for users to read and copy the full string IMHO.

[Copilot]

Pull request overview

Fixes Activity component text overflow on small screens by applying responsive sizing and truncation styles in the overview tile, window header, and activity taskbar items.

Changes:

• Made overview tile font/icon sizes responsive and added ellipsis truncation for long titles.
• Added truncation + width constraints for header title and cluster label to prevent overflow.
• Improved ActivityBar item truncation by adding minWidth: 0 and width/ellipsis styling for cluster/title lines.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File	Description
frontend/src/components/activity/Activity.tsx	Adds responsive sizing and ellipsis truncation rules in overview/header/taskbar to prevent small-screen overflow.
frontend/src/components/activity/snapshots/Activity.Basic.stories.storyshot	Updates storyshot snapshots to reflect new generated classnames from style changes.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[greedy-wudpeckr]

@illume wt are your opinions on this ?

added hover tooltips ?

[illume]

hrmm...

• the text in the bubble should be at a similar size to the other text, so it's readable. Generally you want the body text to be the same size as other body text. Most of the text in headlamp defaults to a size that most people can read. It's also an a11y standard to have minimum sizes.
• cutting off the text makes it less readable to the user than the original. Having a hover makes it readable to people who hover, but just looking at it without having to go to the extra effort of hovering is harder

Could you try to increase the size of the box the text lives in instead? I think vertical height increase would perhaps be better, because looking at the original bumping up the vertical size a bit would allow them both to fit.

[greedy-wudpeckr]

hrmm...

• the text in the bubble should be at a similar size to the other text, so it's readable. Generally you want the body text to be the same size as other body text. Most of the text in headlamp defaults to a size that most people can read. It's also an a11y standard to have minimum sizes.
• cutting off the text makes it less readable to the user than the original. Having a hover makes it readable to people who hover, but just looking at it without having to go to the extra effort of hovering is harder

Could you try to increase the size of the box the text lives in instead? I think vertical height increase would perhaps be better, because looking at the original bumping up the vertical size a bit would allow them both to fit.

@illume any suggestion regarding the taskbar ? does it need to show the whole content or just oky with the one in the image ?

[greedy-wudpeckr]

@illume Does this works ?

[illume]

@greedy-wudpeckr I think the text should be the same size as in the "Before" screenshot.

Something to try: Maybe the Icon could be top left? Then the text could continue on the same line making good use of the space. It might cut off the text though and be more readable with the icon by itself. Edit: I think how you have the icon on the top row by itself means the text doesn't wrap as much making it more readable.

For the task bar, I think it's important to be able to read it without having to hover or such.
Maybe add one more row in height? Then perhaps it won't be so wide, and the full text could wrap.

[greedy-wudpeckr]

@greedy-wudpeckr I think the text should be the same size as in the "Before" screenshot.

Something to try: Maybe the Icon could be top left? Then the text could continue on the same line making good use of the space. It might cut off the text though and be more readable with the icon by itself. Edit: I think how you have the icon on the top row by itself means the text doesn't wrap as much making it more readable.

For the task bar, I think it's important to be able to read it without having to hover or such. Maybe add one more row in height? Then perhaps it won't be so wide, and the full text could wrap.

i think we are sorted with taskbar , and for items do we need change in font size or this is okay ?

[illume]

Try another variation of the task bar? Where the icons are on the same row as the cluster name? "docker-desktop". I expect this will allow the name of it have more space and to flow more.

The text is still smaller than other text I see in the background, and smaller than before. I believe the smallest text shown is the minimum size we should be showing text, according to accessibility and usability guidelines.

[greedy-wudpeckr]

Try another variation of the task bar? Where the icons are on the same row as the cluster name? "docker-desktop". I expect this will allow the name of it have more space and to flow more.

The text is still smaller than other text I see in the background, and smaller than before. I believe the smallest text shown is the minimum size we should be showing text, according to accessibility and usability guidelines.

increased the font size little bit , and that task bar icon things , is this okay now ?

[illume]

Nice one. Looking better. We can await feedback from others :)

In order to test this with different content, it can be good to create different storybook states.

For example:

• very long cluster name
• very long pod name
• very long resource name (Pod is a very short resource name SomeAreVeryLongAndMightLookDifferent)
• very short cluster name
• very short pod name
• some real world example values found on the internet

Then it can be quicker to see if your change works with all the states by quickly flicking through the states in storybook.

[greedy-wudpeckr]

snapshots.mov

PTAL @illume

[illume]

@greedy-wudpeckr good work adding all those states.

With all the states you can look through them to see how the implementation works, and fix any design inconsistencies.

For example, you can see that on some of them the left icon is in the middle, and on others it's at the top. (same with the cluster name).

I think next is to try to fix these inconsistencies, and try to make them render well in all the different states. When you're ready, I think it's a good time to ask for some design feedback on this in the headlamp slack channel.