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

Fix icon alignment in page listings #11870

Merged
merged 2 commits into from Apr 30, 2024

Conversation

laymonage
Copy link
Member

@laymonage laymonage commented Apr 19, 2024

Fixes an issue on Safari introduced in bb12877, while also improving the alignment of the site/folder icon on other browsers. The second commit fixes #11875.

image

Safari before/after

Screenshots image image

Chrome before/after

Screenshots image image

Firefox before/after

Screenshots image image

Copy link

squash-labs bot commented Apr 19, 2024

Manage this branch in Squash

Test this branch here: https://laymonagefix-page-listing-icon-01lce.squash.io

@laymonage
Copy link
Member Author

laymonage commented Apr 19, 2024

The second commit fixes #11875. (Not exactly the same as it was in 6.0 but if we use display: inline we won't be able to easily center the icons vertically, unless we use another element that wraps the title + locale...)

image

@gasman gasman added this to the 6.1 milestone Apr 26, 2024
Copy link
Member

@thibaudcolas thibaudcolas left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looking good, just the one change needed; will tweak and merge.

@@ -4,6 +4,7 @@
border-radius: 2px;
text-align: center;
display: inline-block;
flex-shrink: 0;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As discussed we’ll change this to word-break: normal to fix #11875 while reducing the risk of page titles being squashed by long locale names (Portuguese (Brazil) (latest)).

This was added in f322e9d, when the
snippets listing view was briefly redesigned to put the "Edit", "Delete"
etc. actions in the same line as the title instead of in a new line.

With the universal listings design, all listing actions are put inside a
three-dot dropdown menu.

This style is no longer used anywhere in Wagtail, especially now that
the HistoryView has been reimplemented using the dropdown menu for the
actions.
@thibaudcolas thibaudcolas merged commit 08ee15a into wagtail:main Apr 30, 2024
10 of 13 checks passed
Comment on lines +226 to +229
display: flex;
align-items: center;
justify-content: space-between;
gap: theme('spacing.2');
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unfortunately this caused unexpected styling issues elsewhere 🤦
image

I'll create a PR to fix this

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component:Design system Including the pattern library (Storybook) type:Bug
Projects
Status: ✅ Done
Development

Successfully merging this pull request may close these issues.

6.1rc1. Strange positioning of the language label on dashboard or page explorer
3 participants