Improved readability of draggable tables (CSS change)

Created on 2 June 2023, about 1 year 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

Postponed: needs info

Version

10.1 ✨

Component

Claro →

Last updated about 23 hours ago

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

Created by

AndersTwo

Live updates comments and jobs are added and updated live.

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

Comments & Activities

Issue created by @AndersTwo
Comment about 1 year ago →
AndersTwo
Status changed to Postponed: needs info about 1 year ago11:47am 2 June 2023
Comment about 1 year 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 about 1 year 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.

contrib.social Blog FAQ Discussions

Production build 0.69.0 2024