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

Nav redesign - add wrapping to table header cell #90842

Merged
merged 4 commits into from
May 20, 2024

Conversation

eoigal
Copy link
Contributor

@eoigal eoigal commented May 17, 2024

Fixes #90796

Proposed Changes

  • Adds wrapping to the LAST PUBLISHED table header as in Italian (and likely other languages) it overflows when translated into longer text

After

Screenshot 2024-05-17 at 11 33 04

Why are these changes being made?

Image

Testing Instructions

  • Go to /me/account and change the Interface language to Italian
  • Go to /sites and confirm wrapping occurs

Pre-merge Checklist

  • Has the general commit checklist been followed? (PCYsg-hS-p2)
  • Have you written new tests for your changes?
  • Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
  • Have you checked for TypeScript, React or other console errors?
  • Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
  • Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
  • For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-aUh-p2)?

@matticbot
Copy link
Contributor

This PR does not affect the size of JS and CSS bundles shipped to the user's browser.

Generated by performance advisor bot at iscalypsofastyet.com.

Copy link
Member

@mmtr mmtr left a comment

Choose a reason for hiding this comment

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

It works as expected, however at some viewports the sorting icon moves to a new line which produces an awkward layout:

Screenshot 2024-05-17 at 13 40 17

@eoigal
Copy link
Contributor Author

eoigal commented May 17, 2024

Thanks @mmtr for review. I've updated PR to try to avoid wrapping the sort icon;

Screenshot 2024-05-17 at 19 48 09 Screenshot 2024-05-17 at 19 47 23

@arthur791004
Copy link
Contributor

Would it be better to add vertical-align: middle; to align the sort icon vertically in the middle?

image

Copy link
Contributor

@taipeicoder taipeicoder left a comment

Choose a reason for hiding this comment

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

LGTM 👍
Added vertical alignments as suggested in #90842 (comment).

@taipeicoder
Copy link
Contributor

I was going to merge this until I found out that the column is now wrapped by default. Let me see what can be done...

Screenshot 2024-05-20 at 4 18 15 PM

@taipeicoder taipeicoder merged commit 6b3b773 into trunk May 20, 2024
11 checks passed
@taipeicoder taipeicoder deleted the fix/dashboard-table-header branch May 20, 2024 08: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.

Sites table headers garbled in some locales
5 participants