fix(web): align plugin rows and the Plugins entry in the tools menu

Merged
RO
2d ago
+56-11

Description

Part 5 of the ENG-4416 stack. Two alignment fixes:

  • PluginRowLayout rendered an empty description line, so a plugin with no description had its title pushed up next to the icon. The line now renders only when there is a description.
  • The "Plugins" row in the chat tools menu used padding={0} and a bare chevron, so its icon, label and chevron sat 2-4px off the other rows. It now uses variant="section" like ToolLineItem, and the chevron sits in the same 24px slot as the row buttons.

Measured in the browser: icon x and right-icon x/y now match the other rows (535 / 729 desktop, 63 / 257 mobile); a title-only row's title is centered on the icon.

BeforeAfter (desktop)After (mobile)
beforeaftermobile
beforeaftermobile

Member page: member

How Has This Been Tested?

  • Local ODS stack: admin and member Plugins pages and the chat tools menu, desktop + mobile, with bounding-box checks.
  • New PluginRowLayout.test.tsx; ChatPluginsPopover, PluginsPage and MemberPluginsPage suites: 81 passed.
  • pre-commit on touched files.

Additional Options

  • [Optional] Please cherry-pick this PR to the latest release version.

Mobile Plugins submenu

Browser QA found one more problem at 390px. The submenu had no room beside the tools menu, so it shrank to about 94px and the plugin names were hidden. On phones (useScreenSize().isMobile), the submenu now opens above the Plugins row, over the tools menu, at full width. Desktop still opens it to the right.

Probe at 390px: the submenu is side=top, 240px wide. Wiki MCP and Metadata API are visible. Connect closes both menus and opens one dialog. On desktop the submenu is still side=right, 240px wide.

390px, after390px video
mobile submenumobile submenu video

Link to Devin session: https://app.devin.ai/sessions/09df74c24e19407bbf0e7ab775b5cb0a
Open in Devin Desktop: https://app.devin.ai/desktop/session/09df74c24e19407bbf0e7ab775b5cb0a?variant=devin
Requested by: @rohoswagger

Summary by cubic

Fixes plugin row alignment so plugins without descriptions no longer push their titles up against the icon, and the Plugins entry in the chat tools menu now lines up with the other rows.

  • Plugins without a description no longer render an empty line below the title.
  • The Plugins row in the tools menu now uses variant="section" and a 24px chevron slot, matching the icon and chevron positions of the other rows.
  • On phones, the Plugins submenu now opens above the tools menu at full width, since there was no room beside it; desktop still opens it to the right.
  • Adds tests for PluginRowLayout description rendering.

Summary by CodeRabbit

  • Bug Fixes

    • Plugin rows no longer display an empty description area when no description is available.
    • Plugin descriptions continue to appear beneath their titles when provided.
    • Improved alignment and spacing for the chat plugins popover trigger and chevron.
    • The chat plugins popover now uses responsive positioning, opening above on mobile and remaining right-aligned on larger screens.

  • Tests

    • Added coverage for plugin rows with and without descriptions.