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.

Sign up for GitHub

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

Jump to bottom

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

Closed
agatha197 opened this issue Dec 13, 2024 · 1 comment · Fixed by #2954
Closed

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

agatha197 opened this issue Dec 13, 2024 · 1 comment · Fixed by #2954
Assignees
@agatha197
Milestone
24.09

Comments

@agatha197
Copy link
Contributor

agatha197 commented Dec 13, 2024 •
edited
Loading

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
@agatha197 agatha197 mentioned this issue Dec 13, 2024
Merged
6 tasks
yomybaby pushed a commit that referenced this issue Dec 16, 2024
@agatha197
style: Add flex-wrap and tag resource group text for improved readabi…
bbd8696 
…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
@agatha197 agatha197 removed the area:ux UI / UX issue. label Jan 16, 2025
@agatha197
Copy link
Contributor Author

resolved by #2954

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@agatha197 agatha197

Labels
None yet
Projects
None yet
Milestone
24.09
Development

Successfully merging a pull request may close this issue.

style: Add flex-wrap and tag resource group text for improved readability. lablup/backend.ai-webui
1 participant
@agatha197