Problem/Motivation

Most tables in the admin UI have width: 100%. This can lead to tables with too much horizontal whitespace, especially if the browser window is very wide. It often happens if a table has a Description column, but most or all rows do not have a description.

The excessive horizontal whitespace causes usability and accessibility problems, especially when using screen magnification.

This issue summary is a copy of an issue in the Claro component because Claro is being deprecated and that issue will move to the contrib project. #3574972: Admin tables can have too much horizontal whitespace, creating accessibility problems

Steps to reproduce

  1. Install Drupal with the Umami demo profile.
  2. Log in as an admin user.
  3. Visit /en/admin/structure/types/manage/article/display.

Note the whitespace in the Description column and the width property in the DevTools inspector:

Name, Description, Operations. The Description column is empty and uses more than half of the table width.

Proposed resolution

TBD

Remaining tasks

User interface changes

Introduced terminology

API changes

Data model changes

Release notes snippet

CommentFileSizeAuthor
#15 3618760-15-table-in-default-admin.png735.27 KBkentr
#12 layout-density.png19.15 KBf0ns
#7 3618760-nr-bot_xgwvxch0.txt724 bytesneeds-review-queue-bot
#5 Screenshot from 2026-09-02 15-36-16.png129.92 KBhinal05
#5 Screenshot from 2026-09-02 15-36-32.png62.26 KBhinal05

Issue fork drupal-3618760

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

quietone created an issue. See original summary.

mgifford’s picture

mgifford
he/him
Primary language English
commented
Issue tags: +screen magnification

Some resources on testing this:
- https://accessibility-manual.dwp.gov.uk/best-practice/screen-magnifier-t...
- https://accessibility.huit.harvard.edu/access-technologies/screen-magnif...

It does fall as a best practices though, not a WCAG Success Criteria. It could definitely be improved for screen magnification users.

hinal05’s picture

hinal05 commented
Assigned: Unassigned » hinal05

hinal05 opened merge request !16943

hinal05’s picture

hinal05 commented
Assigned: hinal05 » Unassigned
Status: Active » Needs review
StatusFileSize
new Screenshot from 2026-09-02 15-36-32.png62.26 KB
new Screenshot from 2026-09-02 15-36-16.png129.92 KB

MR makes default_admin tables size to their content on wide screens (≥61em) instead of always filling 100% width; unchanged below that breakpoint.

mgifford’s picture

mgifford
he/him
Primary language English
commented

That's a nice solution. I don't know if anyone else needs to approve it, but looks good to me, thanks @hinal05

needs-review-queue-bot’s picture

needs-review-queue-bot commented
Status: Needs review » Needs work
StatusFileSize
new 3618760-nr-bot_xgwvxch0.txt724 bytes

The Needs Review Queue Bot tested this issue. It fails the Drupal core commit checks. Therefore, this issue status is now "Needs work".

This does not mean that the patch necessarily needs to be re-rolled or the MR rebased. Read the Issue Summary, the issue tags and the latest discussion here to determine what needs to be done.

Consult the Drupal Contributor Guide to find step-by-step guides for working with issues.

kentr’s picture

kentr commented

It failed code style checks (CSS code style): https://git.drupalcode.org/issue/drupal-3618760/-/jobs/11919430#L408

Those need to be fixed before this can go back to Needs review.

I usually fix the CSS in the same step as building it: yarn lint:css --fix && yarn build:css.

@hinal05, thank you for contributing.

I can't tell from the log if this is what happened, so this is just in case you didn't know. It's generally best to wait for the merge request pipeline to pass before setting the issue Needs review.

The documentation may not be super clear on that, but it's implied in Life cycle of an issue:

Software fixes in most projects will trigger an automated run of the existing automated tests (including coding standards) for the project; if these tests fail, the issue status will be set to Needs work and a new fix will need to be proposed.

If the pipeline fails after you change it to Needs review, it will just get kicked back to Needs work by the bot or a reviewer anyway.

hinal05’s picture

hinal05 commented
Assigned: Unassigned » hinal05
hinal05’s picture

hinal05 commented
Assigned: hinal05 » Unassigned
Status: Needs work » Needs review

@kentr Thanks for pointing that out. I fixed the CSS code style issues by running 'yarn lint:css --fix && yarn build:css' and pushed the changes to the MR.

The fix only reordered the existing rule inside the 'table' block. The actual logic is unchanged.

It should pass the code style checks now, so I’m moving it back to “Needs review.”

mgifford’s picture

mgifford
he/him
Primary language English
commented

This looks like a nice simple patch. Thanks @hinal05

Do we need a UX review? What about screenshots? We have:

Screen shot with better magnification support.

Do we need mobile before/after?

f0ns’s picture

f0ns commented
StatusFileSize
new layout-density.png19.15 KB

The new admin_theme has a setting for layout density:

Layout density

Is this affected by it?

kentr’s picture

kentr commented
Status: Needs review » Needs work
Issue tags: +Needs issue summary update, +Needs screenshots

What about screenshots?

Yeah, the IS needs a new Before screenshot. The current one is Claro. I apologize that I didn't catch that before.

And the After screenshot can go in the User interface changes section of the IS.

Do we need a UX review?

The related Claro issue (#3574972: Admin tables can have too much horizontal whitespace, creating accessibility problems) was created by @benjifisher and was never tagged for UX review, so my guess is that we don't unless someone disagrees.

f0ns’s picture

f0ns commented

I thought the Claro administration theme was going to be removed in Drupal 12 so is this change still needed/useful?

As far as I know the new admin theme already covers this: see my comment #12.

kentr’s picture

kentr commented
Issue summary: View changes
Parent issue: » #3585823: [Meta] Improve the accessibility of the Default Admin theme
StatusFileSize
new 3618760-15-table-in-default-admin.png735.27 KB

@f0ns,

You're correct that Default Admin has the Layout density setting, but for me that setting doesn't fix this problem.

Screenshot of the table at /admin/structure/types/manage/article/display with the Layout density setting at Narrow, on a fresh pull of main:

I'm not sure what that Narrow setting is supposed to do. If it's supposed to cover this, to me it's still a problem that:

  1. It's not the default setting.
  2. (Bigger picture) the individual personalization feature for the Default Admin settings isn't enabled by default, and the admin can turn it off.
    A site admin shouldn't be able to override individual UX / accessibility preferences.

I view the current behavior as less-accessible-by-default.

I'm adding this screenshot to the IS to replace the Claro screenshot. Still needs an "after" screenshot in the User interface changes section and an updated proposed resolution.

kentr’s picture

kentr commented

Forgot to say:

The problem in this issue was also there when using the Compact setting for Layout density.

kentr’s picture

kentr commented

It occurred to me:

Why is there a Description column in that table to begin with, if it's empty for every row?

I doubt that removing the column will fix the whitespace if the table still has width: 100%, but still... It seems like it just adds noise / cognitive burden.