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.

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:

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
to-much-whitespace.png74.51 KBbenjifisher

Comments

benjifisher created an issue. See original summary.

kentr’s picture

kentr commented
Related issues: +#3068696: Tables overflow on mobile

Don't know if it's the best solution, but there is the responsive table API that makes some columns hidden by default on narrower viewports. The table at /admin/content is an example of it in action.

There's also #3068696: Tables overflow on mobile that's seeking a solution. Maybe that would fix this?

cilefen’s picture

cilefen commented

I think this issue’s component should be a specific theme rather than “form system”.

kentr’s picture

kentr commented
Related issues: -#3068696: Tables overflow on mobile

I misread and misunderstood the problem, so disregard my previous comment.

Seems like it would be possible to disable the width: 100% at wider viewpoints with a media query breakpoint.

benjifisher’s picture

benjifisher
he/him or they/them
Primary language English
Location Boston area
commented
Component: forms system » Claro theme

@cilefen:

You are right. The style width: 100% comes from core/themes/claro/css/components/tables.pcss.css.

catch’s picture

catch
he/him
Primary language English
commented

Gin is on its way into core soon so it would be good to check if it has the same issue or not.

benjifisher’s picture

benjifisher
he/him or they/them
Primary language English
Location Boston area
commented

I installed Drupal 11.x with the Standard profile and Gin 5.0.12. Then I set Gin as the admin theme and visited /admin/structure/display-modes/view. The <table> element still has the rule width: 100%.

When I disable CSS aggregation, I see that the rule comes from the same CSS file in Claro. That is what I expected, since Gin extends Claro.

quietone’s picture

quietone commented
Title: Admin tables can have too much horizontal whitespace, creating accessibility problems » <h3 id="summary-problem-motivation">Problem/Motivation</h3> Most tables in the admin UI have <code>width: 100%</code>. This can lead to tables with too much horizontal whitespace, especially if the browser window is very wide. It often happens if a table

The Claro theme was approved for removal in #3576460: [policy, no patch] Deprecate and remove Claro.

This is Postponed. The status is set according to two policies. The Remove a core extension and move it to a contributed project and the Extensions approved for removal policies.

The deprecation work is in #3576668: [meta] Tasks to deprecate Claro and the removal work in #3584638: [meta] Tasks to remove the Claro theme.

I created a copy of this for the Admin theme, #3618760: Tables can have too much horizontal whitespace

quietone’s picture

quietone commented
Status: Active » Postponed
quietone’s picture

quietone commented
Title: <h3 id="summary-problem-motivation">Problem/Motivation</h3> Most tables in the admin UI have <code>width: 100%</code>. This can lead to tables with too much horizontal whitespace, especially if the browser window is very wide. It often happens if a table » Admin tables can have too much horizontal whitespace, creating accessibility problems

Fix title.

smustgrave’s picture

smustgrave commented
Project: Drupal core » Claro
Version: main » 3.0.x-dev
Component: Claro theme » Code
Status: Postponed » Needs work

Claro has moved to contrib