craftcms / cms

Build bespoke content experiences with Craft.
https://craftcms.com
Other
3.28k stars 635 forks source link

[4.x]: Entries with longer/truncated titles showing preview/save buttons on multiple lines #11766

Closed turnstylerj closed 2 years ago

turnstylerj commented 2 years ago

What happened?

Description

On entries with long enough titles to get truncated in the top section of the entry view, the preview/draft/save buttons are not staying on a single line, and one or two will go down to the next line depending on the screen width.

Screen-Shot-2022-08-11-at-3 48 15-PM Screen-Shot-2022-08-11-at-3 50 25-PM

These should probably maintain a single-line display and truncate the title further as needed.

Steps to reproduce

  1. Create a new entry with a title long enough to get truncated with ellipsis on large window widths.

Expected behavior

The title gets truncated as needed but the save buttons maintain their layout.

Actual behavior

The save buttons get misaligned at various spots depending on screen width.

Craft CMS version

4.2.1.1

PHP version

8.1.1

Operating system and version

Darwin 21.3.0

Database type and version

MySQL 5.7.34

Image driver and version

GD 8.1.1

Installed plugins and versions

"craftcms/aws-s3": "2.0.1", "craftcms/feed-me": "5.0.4", "craftcms/redactor": "3.0.2", "doublesecretagency/craft-cpcss": "2.5.0", "internetztube/craft-element-relations": "2.0.0", "mmikkel/retcon": "2.4.2", "nystudio107/craft-imageoptimize": "4.0.2", "nystudio107/craft-minify": "4.0.0-beta.2", "nystudio107/craft-seomatic": "4.0.7", "percipioglobal/craft-colour-swatches": "4.2.0.1", "spicyweb/craft-neo": "3.2.5", "verbb/field-manager": "3.0.2", "vlucas/phpdotenv": "^5.4.0", "weareferal/matrix-field-preview": "4.0.2"

brandonkelly commented 2 years ago

The text truncation was considered an accessibility issue already, so further truncating it would be a step in the wrong direction. So we’ve resolved this for Craft 4.3 by preventing the title text from getting truncated in the first place, making the button wrapping a lot less awkward (#11768).