Media interaction in modal

Why this is a good first issue

This is a design enhancement requiring updates to multiple modal components.

AI Summary

The issue proposes enhancements to the media modal's layout and interaction patterns, including scroll behavior and upload states. It requires updates to several components and design alignment, with some requirements still being discussed among maintainers.

Issue Description

What problem does this address?

By looking at the progress made in the following tickets:

#71944
#72612
#71128
#72336

This design proposal enhances the media experience in the modal for various use cases.

What is your proposed solution?

Enhance the whole experience by revisiting the modal's layout structure and the steps involved in the process of adding images and selecting one or several of them. The idea proposed here involves:

Update the components involved in all screens.
Update the spacing approach, especially in DataViews and DataViewsPicker.
Adjust some UI parts of DataViewsPicker to works according to the modal interaction.
Add an uploading state of the entry component.
Add an action in the modal's header to add media files where the button's label reflects the media type and modal context.

✅ Layout

Layout

The layout structure has the same actions as in the current modal, but in an improved version based on the latest components.

When entries overflow the content area, the footer remains visible to prevent missing the actions and having to scroll down.

✅ Scroll

Interaction: scroll

When scrolling, the header keeps it fixed position.

UX: Uploading images

The process for adding images to the library involves different paths. In addition to the component updates, the main proposal here is showing the uploading state of entries inside the content area. Here is a diagram showing how it could work.

<img width="10127" height="4659" alt=

GitHub Labels

[Type] Enhancement[Feature] Media