WordPress.org

Make WordPress Core

Opened 10 days ago

Closed 10 days ago

Last modified 9 days ago

#44092 closed defect (bug) (fixed)

Export/Erase tools: CSS issues with `next_steps` buttons with some locales

Reported by: audrasjb Owned by: azaozz
Milestone: 4.9.6 Priority: normal
Severity: normal Version:
Component: Privacy Keywords: gdpr has-screenshots has-patch fixed-major commit
Focuses: Cc:

Description

This issue happens in fr_FR localization. Since this string is prepared for internationalization, these button text can be quite longer than in English, so we should remove word-wrap: nowrap CSS declaration and add some CSS fixes to make it clean.

Some screenshots below.

(note: this is a quite minor bug, so I guess it can be milestoned to 4.9.7 since 4.9.6 RC2 is about to land)

Attachments (11)

Capture d’écran 2018-05-15 à 17.01.55.png (92.9 KB) - added by audrasjb 10 days ago.
bug happens in fr_FR locale
44092.diff (573 bytes) - added by ianbelanger 10 days ago.
Added CSS for export button to prevent cutoff in French Language
44092-export-button-french.PNG (11.0 KB) - added by ianbelanger 10 days ago.
screenshot of export buttons in french
44092.2-export-button-french.PNG (6.8 KB) - added by ianbelanger 10 days ago.
Updated view
44092.2.diff (615 bytes) - added by ianbelanger 10 days ago.
Added line-height and vertical padding to buttons
44092.3.diff (484 bytes) - added by audrasjb 10 days ago.
Patch refresh with some changes
44092.3-export-button-french.PNG (8.1 KB) - added by ianbelanger 10 days ago.
line-height seems a little to tall imho
44092.4.diff (522 bytes) - added by ianbelanger 10 days ago.
Updated patch with line-height and padding adjustments
44092.4.2.diff (525 bytes) - added by audrasjb 10 days ago.
Fixes line-height and padding
Capture d’écran 2018-05-15 à 20.46.34.png (76.4 KB) - added by audrasjb 10 days ago.
44092.5.diff (522 bytes) - added by ianbelanger 10 days ago.
Updated patch with line-height: 1.5; padding: 4px 10px;

Download all attachments as: .zip

Change History (31)

@audrasjb
10 days ago

bug happens in fr_FR locale

#1 @audrasjb
10 days ago

  • Summary changed from Export/Erase tools: CSS issues with `next_steps` buttons with some languages to Export/Erase tools: CSS issues with `next_steps` buttons with some locales

#2 @audrasjb
10 days ago

  • Keywords has-screenshots added

@ianbelanger
10 days ago

Added CSS for export button to prevent cutoff in French Language

@ianbelanger
10 days ago

screenshot of export buttons in french

#3 @audrasjb
10 days ago

  • Keywords needs-refresh added

Thanks @ianbelanger for this patch!

I think it can be nice to reduce the line height inside the button, and I noticed we should also add some vertical padding after line-height fixes in my live tests on my browser inspector ;-)

#4 @audrasjb
10 days ago

Note regarding future tests: we just changed these strings in fr_FR locale, so please add some words for future tests :)

@ianbelanger
10 days ago

Updated view

@ianbelanger
10 days ago

Added line-height and vertical padding to buttons

#5 @audrasjb
10 days ago

  • Keywords has-patch added; needs-refresh removed

Thank you @ianbelanger !

I tested 44092.2.diff on several browser and it seems nice. But I also noticed there is some issues with mobile screens. These issues also happened before your patch, so I think we'd better open a new ticket to fix it later, since RC2 will land in few hours.

Cheers,

Jb

This ticket was mentioned in Slack in #gdpr-compliance by audrasjb. View the logs.


10 days ago

#7 @audrasjb
10 days ago

  • Keywords needs-refresh added

This patch needs refresh.I'm on it. (see slack mentions)

@audrasjb
10 days ago

Patch refresh with some changes

#8 @audrasjb
10 days ago

In 44092.3.diff:

  • move CSS rule to wp-admin/css/forms.css
  • ensure this rule is self contained to avoid breaking changes
  • fixed the main issue (tested on both desktop and mobile/tablet)

Cheers

Jb

Last edited 10 days ago by audrasjb (previous) (diff)

@ianbelanger
10 days ago

line-height seems a little to tall imho

#9 @azaozz
10 days ago

Tested this but seems we need the line-height: 1.5 in there :)

Mixture of 44092.2.diff and 44092.3.diff like this works?

.privacy_requests .next_steps .button {
    height: auto;
    word-break: break-word;
    white-space: unset;
    line-height: 1.5;
    padding: 4px 10px;
}

@ianbelanger
10 days ago

Updated patch with line-height and padding adjustments

@audrasjb
10 days ago

Fixes line-height and padding

#10 @audrasjb
10 days ago

  • Keywords needs-refresh removed

@ianbelanger
10 days ago

Updated patch with line-height: 1.5; padding: 4px 10px;

#11 @azaozz
10 days ago

  • Milestone changed from Awaiting Review to 4.9.6

#12 @azaozz
10 days ago

  • Owner set to azaozz
  • Resolution set to fixed
  • Status changed from new to closed

In 43278:

Privacy: fix styling of the "next steps" buttons on the Export/Erase tools screens when text is long.

Props audrasjb, ianbelanger.
Fixes #44092.

#13 @azaozz
10 days ago

  • Keywords fixed-major added
  • Resolution fixed deleted
  • Status changed from closed to reopened

This ticket was mentioned in Slack in #gdpr-compliance by azaozz. View the logs.


10 days ago

#15 @melchoyce
10 days ago

  • Keywords commit added

Looks good to me.

#16 @azaozz
10 days ago

  • Resolution set to fixed
  • Status changed from reopened to closed

In 43281:

Privacy: fix styling of the "next steps" buttons on the Export/Erase tools screens when text is long.

Props audrasjb, ianbelanger.
Merges [43278] to the 4.9 branch.
Fixes #44092.

#17 @azaozz
10 days ago

In 43282:

Privacy: use the more compatible word-break: break-all;, see [43278].

See #44092.

#18 @azaozz
10 days ago

In 43283:

Privacy: use the more compatible word-break: break-all;, see [43278].

Merges [43282] to the 4.9 branch.
See #44092.

This ticket was mentioned in Slack in #gdpr-compliance by desrosj. View the logs.


10 days ago

#20 @desrosj
9 days ago

  • Component changed from General to Privacy

Moving to the new Privacy component.

Note: See TracTickets for help on using tickets.