Media library grid item label sticks out, media alignment should adhere to positioning standards

I attached a possible patch to resolve the issue.

Tried to fix CCf for #2.

Verified the patch #3 and tested it on Drupal version 10.1.x. The patch works fine and I have added the before and after screenshots for reference.

Verified and tested patch #3 on 10.1.x-dev. Patch applied successfully.

Test Steps:
1. Goto /admin/content/media-grid
2. Add media with short filename
3. Verify media-grid the item's name is higher than the space under the item preview
4. Apply patch #3
5. Verify media-grid the item's name is within the space

Test Result: media-grid the item's name is within the space under the item preview
Screenshot is same as #4

RTBC +1

Based on https://www.figma.com/file/VNkUIvfbcGr9Jmez3iRXJBjb/Media-widget-field?n..., it looks like there shouldn't be spacing between the name and the image preview. After this change, there would be some spacing:

In the figma design the media items don't contain any images.

But based on your screenshot I made a new patch addressing the space issue.

Fixed order/properties-order. Attached patch and interdiff for same. please review

Verified the patch #10 and tested it on Drupal version 10.1.x. Patch applied cleanly but for image with small height, there is still space between the name and the image preview. I have added the before and after screenshots for reference.

Since this is a UI change screenshots should be added to the issue summary please.

Issue summary proposed solution is to shrink item__attributes but I see we are editing the image. Proposed solution needs to match the patch solution.

Also seems to have caused a regression when you select an item in the media library widget a weird grey line appears on the side.

Updated summary as of comment #14.
Positioning standards adopted from here.

Adding before/after screenshots.

Looking at the screenshots in the summary not sure this is an improvement? First image in the before definitely looks better.

I think the before/after images attached previously did not highlight the issue and the solution, uploading a new set of images for better consideration.

I also think the addition of margin: 0.1rem; in media-library-item__attributes does not make much difference to the solution, rather it misaligns the title towards the top right corner. Video showing how.

If part of the change isn't needed then that should be reverted. Good catch.

Made the suggested changes

Left 1 question on MR.

Believe this one is actually ready.

Thanks for having the latest images available in the Issue summary.

Sorry, folks but there are two MRs here and there is no indication in the issue summary for which one to review. Not sure why there are two MR here.

@smustgrave, you say you left a comment in the MR but I can't find it in either one.

Both merge requests are nearly identical, with MR !8547 including "margin" CSS rules in addition to the "padding" changed by MR !9369.

I've tried the patch in a setup using entity_browser, and have observed two problems still. Maybe this is due to entity_browser, but just wanted to make sure. If so, ignore what I said ;)

1. Long labels that have are only fully shown when hovered still have a missmatched box size. This could be fixed with left: 0; right: 0;. Is this intentional?
   
2. There is some kind of overhang for the hover effect. This is annoying when trying to hit something below, like an item in the next row or the submit button in an entity_browser.
   

Regarding which MR to review:- As per #23 🐛 Media library grid item label sticks out, media alignment should adhere to positioning standards RTBC ,

..addition of margin: 0.1rem; in media-library-item__attributes does not make much difference to the solution, rather it misaligns the title towards the top right corner.

MR!9369 has the correct changes. So I'm hiding the branch of MR!8547 as i'm unable to close that MR.

nayana_mvr → changed the visibility of the branch 3338309-media-library-grid to hidden.

Regarding #30, I'm able to reproduce the point 1 (Please see the screen recording. This is after applying the current MR changes).

I think it is because of max-width calculation. For .media-library-item__attributes, a max-width: calc(100% - 10px); is used but I'm not sure why it’s added. Removing that or setting that to 100% fixes this issue. I can implement this change if someone can confirm about this solution.

As for point 2 in #30, I'm unable to reproduce that issue. Can be verified in the screen recording attached.

Thank you @nayana_mvr for the screen recording. Point 1 is indeed fixed by changing max-width: calc(100% - 0.625rem); to max-width: 100%. Though removing that style entirely would break the ellipsis effect.

Regarding point 2, I just checked again and it only shows in Edge (Chrome-based browser), while Firefox displays fine. I suspect some rounding issues going on there.