fix: #3633789 Fix the AI tabs overlapping in the Media Library in Gin and Default Admin

Rajab Natshahrequested to merge
issue/ai_media-3633789:3633789-fix-the-ai into 1.0.x

Closes https://www.drupal.org/i/3633789

What changed

  • Each AI tab in the Media Library gets the list item classes of its media type's tab (media-library-menu__item, which Gin and Default Admin style), with the type class made …-ai, plus ai-media-tab. Before, the AI tab's list item had no class, so it sat at a different height and the tabs around it looked overlapped.
  • The tab title and the "New" badge stay on one line, kept to the width of the tab menu.
  • The "New" badge shows on every AI tab, also on one whose provider is not set up yet (administrators see that tab).

Testing

  • Kernel: MediaLibraryAiTabsTest::testTabItemClasses and testBadgeOnEveryAiTab; the test module mimics the admin theme's preprocess. Full suite: 85 tests pass, phpcs and phpstan clean.
  • Manually in Gin on a Varbase 11 site: Image, Generate image with AI, SVG Image, Generate SVG with AI, Video, Generate video with AI all line up, one line each with the badge.

Screenshots

From a local Varbase 11 site in Gin.

Standalone AI tabs, each on one line with its New badge

AI-Generated: Yes

Checkpoints

  • Issue linked
  • Coding standards (phpcs, phpstan)
  • Automated tests
  • Tested manually in Gin
  • Tested manually in Default Admin
  • Reviewed by a human
  • Code review by maintainers

🤖 Generated with Claude Code

Edited by Rajab Natshah

Merge request reports