Problem/Motivation

In the Media Library the AI tabs ("Generate image with AI", ...) do not line up with the media type tabs: they miss the classes core gives every menu item (media-library-menu__item and the type class), so the admin theme's rules for the tab list do not apply to them. In Gin the AI tabs sit at a different height and the neighbouring tabs look overlapped.

Steps to reproduce

  1. Use Gin, Claro or Default Admin as the administration theme.
  2. Open the Media Library from a field that allows several media types.
  3. Look at the tab list: the AI tabs have a different spacing, and the "New" badge makes them wrap onto two lines.

Proposed resolution

  • Give each AI tab the same list item classes as its media type tab, plus its own -ai class.
  • Keep the AI tabs at the height of the others, with the badge kept on the same line where it fits.
  • Check Claro, Gin and Default Admin.

AI-Generated: Yes

Remaining tasks

  • ✅ File an issue
  • ❌ Addition/Change/Update/Fix
  • ❌ Testing to ensure no regression
  • ❌ Automated unit/functional testing coverage
  • ❌ Developer Documentation support
  • ❌ User Guide Documentation support
  • ➖ UX/UI designer responsibilities
  • ❌ Accessibility and Readability
  • ❌ Reviewed by a human
  • ❌ Code review by maintainers
  • ❌ Full testing and approval
  • ❌ Credit contributors
  • ❌ Review with the product owner
  • ❌ Update Release Notes
  • ❌ Release

User interface changes

  • The AI tabs in the Media Library line up with the other tabs in Claro, Gin and Default Admin.

The standalone AI tabs in the Media Library, each on one line with its New badge

API changes

  • None.

Data model changes

  • None.

Release notes snippet

  • The AI tabs in the Media Library no longer look overlapped.
CommentFileSizeAuthor
#3 07-standalone-tabs-one-line.png35.81 KBrajab natshah

Issue fork ai_media-3633789

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

rajab natshah created an issue. See original summary.

rajab natshah’s picture

StatusFileSize
new35.81 KB

Merge request: !29

The AI tabs line up with the other Media Library tabs in Gin, one line each with the "New" badge beside the title (also on Generate video with AI). Screenshots from a local Varbase 11 site in Gin:

The standalone AI tabs in the Media Library, each on one line with its New badge

rajab natshah’s picture

Issue summary: View changes

  • rajab natshah committed 6e8814a7 on 1.0.x
    fix: #3633789 Fix the AI tabs overlapping in the Media Library in Gin...
rajab natshah’s picture

Status: Active » Fixed
Issue tags: +ai_media-1.0.0-beta1

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.