Fix UI Overflow Issue for Long Organization Names #18816
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
gtsiolis
reviewed
Sep 27, 2023
There was a problem hiding this comment.
Thanks, @Siddhant-K-code. 🌮
Left some comments below, I think we only need to add truncate and w-40 in two places and remove all the other changes to make this use truncation properly.
Cross-posting for visibility from relevant discussion (internal) although this could be out of the scope of this PR:
@gtsiolis: We should probably also limit the org name to 32 as it makes even more sense here.
| BEFORE | AFTER |
|---|---|
 |
 |
 |
 |
Co-authored-by: George Tsiolis <[email protected]>
gtsiolis
approved these changes
Sep 27, 2023
roboquat
deleted the
siddhant/exp-708-ui-overflow-on-large-organization-names
branch
14 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
This PR addresses a UI overflow bug that occurs when organization names exceed a certain length. Users were experiencing a visual glitch where long organization names would overflow their container, leading to a disrupted user interface and degraded user experience.
Summary generated by Copilot
🤖 Generated by Copilot at a7f1578
This pull request improves the UI of the dashboard by truncating long organization names and icons in the organization selector component. It applies the
truncateclass to several divs inOrganizationSelector.tsx.Related Issue(s)
Fixes EXP-708
How to test
Documentation
Preview status
Gitpod was successfully deployed to your preview environment.
Build Options
Build
Run the build with werft instead of GHA
Run Leeway with
--dont-testPublish
Installer
Add desired feature flags to the end of the line above, space separated
Preview Environment / Integration Tests
If enabled this will build
install/previewIf enabled this will create the environment on GCE infra
Valid options are
all,workspace,webapp,ide,jetbrains,vscode,ssh. If enabled,with-previewandwith-large-vmwill be enabled./hold