Improved readability of draggable tables (CSS change)

Open on Drupal.org →

Created on 2 June 2023, almost 2 years ago

Problem/Motivation

Draggable tables take up excessive vertical space (and unevenly so), making it hard to edit, for example, large taxonomy trees. Much screen real estate is wasted for no apparent reason.

Steps to reproduce

Try and reorganize a large taxonomy tree structure. Everyone should be familiar with the experience already.

Proposed resolution

The following CSS change in core/themes/claro/css/components/tabledrag.css condenses vertical table spacing such that even very large tables take up less vertical space per row, making them more easily grasped and re-organized with drag and drop.

table.draggable-table td {
  height: 1.1em;
  padding-top: 0;
  padding-bottom: 0;
}
table.draggable-table tr div.indentation {
  height: 1.0em;
}

Remaining tasks

Please review and add above CSS to the Claro theme. I am not familiar enough with the workflow here, but still wanted to share this improvement with the community.

🌱 Plan

Status

Active

Version

10.1 ✨

Component

Last updated about 6 hours ago

Maintained by
🇪🇸Spain @ckrina
🇨🇭Switzerland @saschaeggi
🇺🇸United States @bnjmnm
🇫🇮Finland @lauriii

Created by

Live updates comments and jobs are added and updated live.

CSS
It involves the content or handling of Cascading Style Sheets.

admin theme

Sign in to follow issues

Comments & Activities

Issue created by @AndersTwo
Comment almost 2 years ago →
AndersTwo
Status changed to Postponed: needs info almost 2 years ago11:47am 2 June 2023
Comment almost 2 years ago →
🇫🇮Finland lauriii Finland
Thank you @AndersTwo for the proposal! Do you have a screenshot of the proposed change from your site? I tried to make the change but I'm not sure I made it correctly because I didn't see any changes.

If you want to work on a MR for this issue, feel free to reach out to me in Drupal Slack → . I'd be happy to help you get started! 😊
Comment almost 2 years ago →
AndersTwo
Before:

After:

A hefty issue at least with Safari and Chrome, if I remember correctly. Almost unusable. Firefox seems to be more tolerant.

Appending the proposed snippet to the CSS file fixes this.
Comment about 23 hours ago →
🇺🇸United States smustgrave
Just following up if this should be re-open,. if no follow up in 3 months could be closed

contrib.social Blog FAQ Discussions

Production build 0.71.5 2024