-
Notifications
You must be signed in to change notification settings - Fork 5.8k
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
Changing shrinking screen size entity title behavior #24882
Conversation
Changed Packages
|
Signed-off-by: Jordan Snow <jordans@spotify.com>
8ab767b
to
5dcfdd3
Compare
If I can make a suggestion, I would definitely prefer that the title show an ellipsis and have a tooltip show the full name when you roll over with the mouse. Part of the reason is that on long names like this it is hard to tell if there is an actual line-break in the name. |
@joshjung an entity name shouldn't support line breaks in the name in the standard catalog config. Is this something that you're seen users override? The hover tool tip still shows the full, none-wrap and none-formatted name if there is any confusion there. Seems like adding a step to a user's information consumptions for an edge case feels bad from their perspective |
Yeah it's just a personal preference having done frontend for a long time, I don't enjoy when large titles wrap a ton within words as it can cause confusion and it causes the page layout to end up looking odd. Feel free to carry on. |
This PR has been automatically marked as stale because it has not had recent activity from the author. It will be closed if no further activity occurs. If the PR was closed and you want it re-opened, let us know and we'll re-open the PR so that you can continue the contribution! |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hi @SnowBlitzer, thanks for opening a pull request 🙂 .
I would like to recommend adding an optional property to the component to disable title wrapping rather than changing the default style. Something like:
<EntityLayoutTitle disableTitleWrapping .../>
What do you think?
@camilaibs I think this is a great compromise! |
This PR has been automatically marked as stale because it has not had recent activity from the author. It will be closed if no further activity occurs. If the PR was closed and you want it re-opened, let us know and we'll re-open the PR so that you can continue the contribution! |
Hey, I just made a Pull Request!
It seems some work done for screen sizing has been lost (ex this PR) and longer names get cut off for entities and the formatting of the header can become jumbled.
For both better readability and easier accessibility, I've made it so the name wraps to keep the user provided with full information and formatted the owner, lifecycle, and menu to always stay together and move as unit.
Before:
![Screenshot 2024-05-23 at 10 44 15 AM](https://private-user-images.githubusercontent.com/7171310/333229795-6c75705e-2edf-4dd7-bccf-ff7471bb24ab.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjUwODgyNDMsIm5iZiI6MTcyNTA4Nzk0MywicGF0aCI6Ii83MTcxMzEwLzMzMzIyOTc5NS02Yzc1NzA1ZS0yZWRmLTRkZDctYmNjZi1mZjc0NzFiYjI0YWIucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDgzMSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA4MzFUMDcwNTQzWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9NWM2Zjk1ZTA4ZTdlZGMzOGY2Y2E2NDU0NjIwMDkwNWRmOWMzNTYyZGE1MDQ4YTA2NjNjMTExNTI4NGFhOTBmNSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.jX4HW0-40HLPw-5XL0FP_t-Ry-OtTa_zmeLl3IRePmk)
![Screenshot 2024-05-23 at 10 44 43 AM](https://private-user-images.githubusercontent.com/7171310/333229803-1cf1b950-1e55-4c9c-8712-6eeef52065c9.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjUwODgyNDMsIm5iZiI6MTcyNTA4Nzk0MywicGF0aCI6Ii83MTcxMzEwLzMzMzIyOTgwMy0xY2YxYjk1MC0xZTU1LTRjOWMtODcxMi02ZWVlZjUyMDY1YzkucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDgzMSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA4MzFUMDcwNTQzWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9NTAxNzJkNDQzMmQ2NTg4NjFiM2NjODJjZDE3YmU5YzE1ZTM5NTE3ZGFjNGFhYzU5Y2NlMzc3NzRjZGY0NjQzMCZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.AO6t99kA_bANKR5sVhDe3hYYzykbvwl8lOcgP2kpMXI)
![Screenshot 2024-05-23 at 10 44 55 AM](https://private-user-images.githubusercontent.com/7171310/333229805-02d1df68-69ed-4e0e-9232-8693565d3046.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjUwODgyNDQsIm5iZiI6MTcyNTA4Nzk0NCwicGF0aCI6Ii83MTcxMzEwLzMzMzIyOTgwNS0wMmQxZGY2OC02OWVkLTRlMGUtOTIzMi04NjkzNTY1ZDMwNDYucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDgzMSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA4MzFUMDcwNTQzWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9OTM2ZTQzYzBlYzY3MmMxOGE3OGQ3OGE4YjAxZDZjNjgwYTFmYzNkYzZmY2M1MjRmNTA4M2EzYzY3ZDM2YjhlMyZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.n-mFbkkBTKLCfDf6ucjxXWS2Vmk2gQakwWRTeCGHCuc)
After:
![Screenshot 2024-05-23 at 10 45 27 AM](https://private-user-images.githubusercontent.com/7171310/333230056-3d44685d-c797-433c-9ee7-4ae584572f02.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjUwODgyNDQsIm5iZiI6MTcyNTA4Nzk0NCwicGF0aCI6Ii83MTcxMzEwLzMzMzIzMDA1Ni0zZDQ0Njg1ZC1jNzk3LTQzM2MtOWVlNy00YWU1ODQ1NzJmMDIucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDgzMSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA4MzFUMDcwNTQ0WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9MWJjMDFlZmU3ZDIxYTE0ODdkYzhiNzVhMTdhMzZjMzA5M2JjZjU4MzQ1ZTgwNWI2NjY5MWZiNGFhYzgwODFjMiZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.PZeYJfjiNODrcY0d6AxbCh93faD4CZnZoSlUtDPGJzs)
![Screenshot 2024-05-23 at 10 45 21 AM](https://private-user-images.githubusercontent.com/7171310/333230053-32eacc46-be8d-472a-8cc2-b5237877f990.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjUwODgyNDQsIm5iZiI6MTcyNTA4Nzk0NCwicGF0aCI6Ii83MTcxMzEwLzMzMzIzMDA1My0zMmVhY2M0Ni1iZThkLTQ3MmEtOGNjMi1iNTIzNzg3N2Y5OTAucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDgzMSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA4MzFUMDcwNTQ0WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9Mjg4ZWY2NTA1NWVmN2VmZDJiZjA0NmI0Nzc4YjM0Y2Y0MTM2MDg4MTBiZGE4OGNiMjhkNmI1NmVkY2U4NTEyYSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.iEmHnd_zh5JuIVpEvqaUIumHHEKJ5nET0YS9RVowH30)
![Screenshot 2024-05-23 at 10 45 15 AM](https://private-user-images.githubusercontent.com/7171310/333230047-6c0805c8-44c7-4499-a292-d94b853069c8.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjUwODgyNDQsIm5iZiI6MTcyNTA4Nzk0NCwicGF0aCI6Ii83MTcxMzEwLzMzMzIzMDA0Ny02YzA4MDVjOC00NGM3LTQ0OTktYTI5Mi1kOTRiODUzMDY5YzgucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDgzMSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA4MzFUMDcwNTQ0WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9NzQwOTM1NDljNjRiZDE4OTZhZDA4NjEyYTZiMGFmYTFmOGI5YzgzNTc4OWFlNzAxYmM1MThjYzFkNWJlZGVhZSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.psZEtNEu9aF6kZMoouXgha5oHBcho_ce5Y3oXIGTVgk)
✔️ Checklist
Signed-off-by
line in the message. (more info)