Make the interface more compact

[marcoambrosini]

Part of #45751

There's a lot of whitespace between elements, some elements are too big and the usability of Nextcloud would improve if the UI was overall more compact.

• We've used so far a margin of 8 pixels between list items, buttons and boundaries, we could cut that down to 4 (--default-grid-baseline).
• We are using a minimum target size of 44 pixels for all clickable elements, while the actual accessibility requirement is much lower than that (24px). Ref: https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html
  I know that touchscreens are a concern for these elements, but we can have fallbacks in place for those, or preserve a bigger size for main action targets.

As an example, this is the range of target sizes in dropbox and google drive. They range from 17px (a link) to 74px (main actions) and a hierarchy is established. Conversely almost all our elements have a 44px minimum target size, even the table header.

TODO

📐 Main work

• Add new variables Feat: add new clickable area variables #45818
• Reduce --border-radius-element to 8px now that clickable elements are smaller Feat: reduce border radius element to 8 px #45819
• Update component library fix: Migrate SCSS $clickable-area to CSS --default-clickable-area nextcloud-libraries/nextcloud-vue#5694
• Developer documentation with step-by-step upgrade instructions
• Update the documentation about these changes
• Add it to the App upgrade guide: https://github.com/nextcloud/documentation/blob/master/developer_manual/app_publishing_maintenance/app_upgrade_guide/upgrade_to_30.rst
• Post on the forum in the Development category about this update. Good examples are these posts by Daphne: https://help.nextcloud.com/t/on-the-roadmap-deprecation-of-php-7-4/149848 and https://help.nextcloud.com/t/update-on-32-bit-support-decision-to-block-the-update-on-nextcloud-26-reverted/153345

[marcoambrosini]

everything done :)