Problem/Motivation

Discovered while working on #3306820: Show machine name in "Manage form display" and "Manage display" table row.

Steps to reproduce

  1. Install Standard and enable the Media module.
  2. Go to /admin/structure/media/manage/remote_video/fields.
  3. Shrink your browser tab gradually until the "Machine name" column starts to wrap, but not far enough to hit the breakpoint where it will be hidden.
  4. Notice that the machine name is wrapped on several lines with hyphens, which is confusing and makes it look like hyphens are a part of the machine name.

Field table showing a field machine name that looks like 'field_media_oem-bed_video' or perhaps two machine names, 'field_media_oem-' and 'bed_video'

Proposed resolution

  • Fix the CSS for this column (on Manage fields, Manage display, and Manage form display following #3306820: Show machine name in "Manage form display" and "Manage display" table row; possibly other places) so that it does not wrap with hyphens.
  • Machine names of a reasonable length (TBD) should not break, and the column should be hidden when the window is too small to display the longest (reasonable-length) machine name.
  • Exceptionally long machine names should be truncated, possibly with an ellipsis, or wrapped without hyphens, or another strategy (research the problem of how long string literals are handled elsewhere in the UI; there are some related issues from the past year or so).

Remaining tasks

TBD

User interface changes

Hopefully better wrapping behavior for machine name columns.

API changes

Probably not.

Data model changes

N/A

Release notes snippet

N/A

CommentFileSizeAuthor
#2 Screenshot 2024-07-03 at 12.06.53.png143.07 KBsimohell
Screenshot 2024-06-17 at 4.36.47 PM.png50.45 KBxjm

Issue fork drupal-3455155

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

xjm created an issue. See original summary.

simohell’s picture

simohell commented
Issue tags: +Usability
StatusFileSize
new Screenshot 2024-07-03 at 12.06.53.png143.07 KB

I think we should expand the scope to include also the Label column.

The label column does not break lines at all while the machine name which needs to be an exact reference does. It is not common to have very long words in labels, but in some languages and some edge cases there may be fairly long words.

Screenshot of content field listing with a very long sinlge word label not breaking lines and a maximum length machine name breaking lines with hyphens automatically added.

The text seem to jus inherit hyphens: auto from body.
word-break property seems no to be set at all.

For the machine names we would want to have them readable as is an also copy them for pasting elsewhere. It is a common use case that the start of the machine name is the same for several fields and the end is significant. This speaks against having an ellipses. Thus I suggest adding 

word-break: break-word;
hyphens: none;

for the machine name (it's always a single word anyway)

For the label I think it would make sense to have word-break: break-word; but keeping the default auto-hyphens.

I wonder if it would merit to have a separate class to handle the unhyphened breaking words so that it would be reusable where need arises? Or would that be an overkill?

simohell’s picture

simohell commented

Usability review

We discussed this issue at #3457736: Drupal Usability Meeting 2024-07-05. That issue will have a link to a recording of the meeting. For the record, the attendees at today's usability meeting were @benjifisher, @rachelh_design, @rkoller, @shaal, and @simohell.

If you want more feedback from the usability team, a good way to reach out is in the #ux channel in Slack.

We reached a consensus, that the best option for now, is to allow machine names to break word, but disable hyphenation.

We recommend limiting the scope to this single change and leave the rest for existing functionality and rendering implemented by each browser. For future, in a much wider context, we could consider using for mobile/narrow viewport a structure different from html table to improve usability.

Version: 11.x-dev » main

Drupal core is now using the main branch as the primary development branch. New developments and disruptive changes should now be targeted to the main branch.

Read more in the announcement.