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

[5.x] Optimize display of long titles in edit forms #10988

Merged
merged 5 commits into from
Oct 22, 2024

Conversation

daun
Copy link
Contributor

@daun daun commented Oct 21, 2024

Adjust a few styles to better accommodate long entry and term titles. Avoids a situation where the Save button was pushed off the screen.

The examples might seem a bit contrived, but I'm literally working on a project where an entry is titled Aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa!!!!!! and editors expect it to render okay in the control panel.

I had to create a new utility class since the one included in tailwind doesn't quite do what it says. The purpose here is to break words longer than their container, and only those words.

 

1) Align title, status dot and save button on baseline

Before

Screenshot 2024-10-22 at 00 39 18

After

Screenshot 2024-10-22 at 00 37 48

 

 

2) Avoid save button being pushed off-screen

Before

Screenshot 2024-10-22 at 00 42 47

After

Screenshot 2024-10-22 at 00 49 03

 

 

3) Contain entry title in search overlay

Before

Screenshot 2024-10-22 at 00 53 13

After

Screenshot 2024-10-22 at 00 53 56

@jackmcdade jackmcdade merged commit e43bad2 into statamic:5.x Oct 22, 2024
18 checks passed
@jackmcdade
Copy link
Member

Very nice, thank you!

@daun daun deleted the feature/optimize-for-long-titles branch October 22, 2024 14:57
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants