Fix inconsistent AI catalog list typography across pages

What does this MR do and why?

The AI catalog list looks different on the Explore page than on the project page — different row height and font size. The cause is GlTabs from @gitlab/ui, which always wraps its content in a gl-tab-content class. That class sets typography (line-height, font-size), not just layout.

On the project page, the list renders inside a tab panel, so it inherits that typography. On the Explore page, the tabs are navigation only and the list is rendered below them by the router, so it sits outside the tab wrapper and falls back to the page default instead. Rows ended up about 10px taller on Explore than on the project page.

This MR makes ai_catalog_list.vue — the component shared by the Explore page and the project page's Enabled, Managed, and AI Catalog tabs — set its own typography on its root element, instead of depending on whatever container it happens to render in. Both pages now render at the same 16px. The project page is unchanged; the Explore page tightens up, with rows about 10px shorter than before.

Needs UX review before merge: the Explore page's visual change is the point of this fix, but since it is a visible change, UX should sign off before this merges.

References

#600305 (closed)

Screenshots or screen recordings

Before After
image.png image.png

Author will attach before/after screenshots of the Explore catalog list.

How to set up and validate locally

  1. Visit the project catalog page: /<project>/-/automate/agents.

  2. Visit the Explore catalog page: /explore/ai-catalog/agents.

  3. On each page, open the browser console and run:

    const li = [...document.querySelectorAll('[data-testid="ai-catalog-item"]')]
      .find(el => el.getBoundingClientRect().height > 0);
    console.table({ inTabContent: !!li.closest('.gl-tab-content'),
                    lineHeight: getComputedStyle(li).lineHeight });
  4. lineHeight should read 16px on both pages. inTabContent will still be false on Explore and true on the project page — that is expected. The containers still differ, only the rendering no longer does.

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist.

Edited by Jafar Soltani

Merge request reports

Loading
Loading