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

Add flex-wrap style to resource group tags for improved readability #2955

Open
agatha197 opened this issue Dec 13, 2024 · 0 comments · Fixed by #2954
Open

Add flex-wrap style to resource group tags for improved readability #2955

agatha197 opened this issue Dec 13, 2024 · 0 comments · Fixed by #2954
Assignees
Labels
area:ux UI / UX issue.
Milestone

Comments

@agatha197
Copy link
Contributor

Main idea

Description:
In the Backend.AI Web UI, the display of resource group tags currently lacks the flex-wrap CSS property. This omission causes the tags to overflow their container or be displayed in a single, long line, which significantly hampers readability and user experience, especially when there are multiple tags.

Expected Improvement:
By adding the flex-wrap property to the container of the resource group tags, we can ensure that tags are neatly wrapped to the next line when they exceed the width of their container. This enhancement will improve the readability of the tags and provide a cleaner, more user-friendly display.

Steps to Reproduce:
Set endpoint to dogbowl and visit http://127.0.0.1:9081/serving/cdc6ffa1-5b35-4111-9f2a-d99875fdf6ff.

Alternative ideas

No response

Anything else?

No response

@agatha197 agatha197 added this to the 24.09 milestone Dec 13, 2024
@agatha197 agatha197 self-assigned this Dec 13, 2024
@agatha197 agatha197 added the area:ux UI / UX issue. label Dec 13, 2024
yomybaby pushed a commit that referenced this issue Dec 16, 2024
…lity. (#2954)

resolves #2955

**Changes:**
Enhances the session detail view by wrapping the resource allocation section and displaying the scaling group inside a Tag component for better visual hierarchy and consistency.

**Impact:**
Users will see a clearer, more visually distinct scaling group indicator in the session details, with improved wrapping behavior for resource allocation information.

**Before:**

![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/2HueYSdFvL8pOB5mgrUQ/a9275bb6-3123-420b-b47e-1007aab51d67.png)

**After:**

![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/2HueYSdFvL8pOB5mgrUQ/7a413e0a-8afc-4b5f-b9d6-ce0a89b95818.png)

**Checklist:**
- [ ] Mention to the original issue
- [ ] Documentation
- [ ] Minium required manager version
- [ ] Specific setting for review
- [ ] Minimum requirements to check during review
- [ ] Test case(s) to demonstrate the difference of before/after
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area:ux UI / UX issue.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant