Skip to content

fix(intelligent-assistant): MCP settings panel fills space in docked/overlay mode (RHDHBUGS-3576) - #4213

Open
rohitratannagar wants to merge 2 commits into
redhat-developer:mainfrom
rohitratannagar:roxie/rhdhbugs-3576
Open

fix(intelligent-assistant): MCP settings panel fills space in docked/overlay mode (RHDHBUGS-3576)#4213
rohitratannagar wants to merge 2 commits into
redhat-developer:mainfrom
rohitratannagar:roxie/rhdhbugs-3576

Conversation

@rohitratannagar

@rohitratannagar rohitratannagar commented Aug 9, 2026

Copy link
Copy Markdown
Contributor

Summary

  • Fix MCP settings panel not filling available space in docked and overlay modes, which caused visible gray borders around the menu area

Fixed

  • RHDHBUGS-3576 — MCP menu in docked and overlay mode does not fill space and shows gray borders

Root Cause

The PatternFly chatbot Settings component's default CSS (justify-content: center, overflow: scroll, border-bottom on form rows) caused the MCP settings panel to appear visually smaller than its container in docked/overlay modes, with gray gaps visible around it.

Changes

Fixed by overriding the Settings wrapper chain with proper flex-fill behavior:

  • Added flex: 1 and minHeight: 0 throughout the form container chain (container → form → row → McpServersSettings root)
  • Overrode justify-content to flex-start (was center, which vertically centered content in column mode)
  • Overrode overflow to hidden (was scroll, which could show scrollbar artifacts)
  • Set border: 'none' at all levels to eliminate the gray border from border-bottom: 1px solid

Checklist

  • TypeScript compiles cleanly (yarn tsc:full)
  • All 980 tests pass (yarn test --watchAll=false)
  • Build succeeds (yarn build:all)
  • Prettier formatted
  • Changeset included

Fixes: https://redhat.atlassian.net/browse/RHDHBUGS-3576

Made with Cursor

rohitratannagar and others added 2 commits August 10, 2026 00:40
@rohitratannagar @cursoragent
fix(intelligent-assistant): MCP settings panel fills space in docked/…
280f87b 
…overlay mode

The PatternFly chatbot Settings component's default CSS includes
justify-content: center, overflow: scroll, and border-bottom on form
rows. In docked/overlay mode these defaults caused the MCP settings
panel to appear visually smaller than its container, with gray gaps
visible around it.

Fix by overriding the Settings wrapper with proper flex-fill behavior
(flex: 1, minHeight: 0) throughout the form container chain, removing
borders/overflow, and aligning content to flex-start instead of center.

Fixes: RHDHBUGS-3576

Assisted-by: Composer
Co-authored-by: Cursor <cursoragent@cursor.com>
@rohitratannagar @cursoragent
chore(intelligent-assistant): add changeset for RHDHBUGS-3576 fix
d6856b8 
Fixes: https://redhat.atlassian.net/browse/RHDHBUGS-3576
Signed-off-by: rohitratannagar <rohitratannagar2003@gmail.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
@rhdh-gh-app

rhdh-gh-app Bot commented Aug 9, 2026

Copy link
Copy Markdown

Changed Packages

Package Name Package Path Changeset Bump Current Version
@red-hat-developer-hub/backstage-plugin-intelligent-assistant workspaces/intelligent-assistant/plugins/intelligent-assistant patch v3.2.0

@rhdh-qodo-merge

rhdh-qodo-merge Bot commented Aug 9, 2026

Copy link
Copy Markdown

PR Summary by Qodo

Fix MCP settings panel to flex-fill in docked/overlay chatbot modes

🐞 Bug fix 🕐 20-40 Minutes

Grey Divider

AI Description 

• Make MCP settings panel fill available space in docked/overlay modes to remove gray gaps.
• Override PatternFly Chatbot Settings layout defaults (centering/scroll/borders) with flex-safe
 styles.
• Add a patch changeset documenting the UI fix for release notes.
Diagram 

graph TD
  A["Docked/Overlay Chat UI"] --> B["PF Chatbot Settings wrappers"] --> C["LightSpeedChat settingsFlat styles"] --> D["Settings form + rows"] --> E["McpServersSettings root"]
  C -. "override: flex-fill, no borders, hidden overflow" .-> D
Loading
High-Level Assessment

The following are alternative approaches to this PR:

1. Upstream fix in PatternFly chatbot Settings component
  • ➕ Eliminates the need for app-level CSS overrides
  • ➕ Benefits all consumers of the Settings component
  • ➖ Requires coordination/release timing with upstream
  • ➖ May be harder to land quickly for a product bugfix
2. Wrap Settings content with a dedicated internal layout component
  • ➕ Centralizes flex/overflow rules in one owned wrapper
  • ➕ Reduces reliance on specific PF classnames/selectors
  • ➖ Still needs careful integration to avoid double-scroll/height issues
  • ➖ Adds an extra component layer for a narrowly-scoped fix

Recommendation: The current approach (targeted overrides on the Settings wrapper chain plus a flex-enabled McpServersSettings root) is the fastest and most reliable fix for a product UI regression in docked/overlay modes. If the PF defaults continue to cause issues elsewhere, consider an upstream PR or a single internal wrapper component to reduce dependence on PF class selectors.

Files changed (3) +20 / -5

Bug fix (2) +15 / -5
LightSpeedChat.tsxForce PF chatbot Settings wrapper chain to flex-fill without borders/scroll artifacts +13/-4

Force PF chatbot Settings wrapper chain to flex-fill without borders/scroll artifacts

• Updates the 'settingsFlat' styles to apply 'flex: 1' and 'minHeight: 0' throughout the PatternFly chatbot Settings container/form/row chain. Also overrides default centering ('justify-content: flex-start'), disables wrapper scrolling ('overflow: hidden'), and removes borders to prevent gray gaps in docked/overlay modes.

workspaces/intelligent-assistant/plugins/intelligent-assistant/src/components/LightSpeedChat.tsx

McpServersSettings.tsxMake MCP settings root participate in flex layout +2/-1

Make MCP settings root participate in flex layout

• Adjusts the MCP settings root container to use 'minHeight: 0' and 'flex: 1' so it can properly grow/shrink within the Settings wrapper layout.

workspaces/intelligent-assistant/plugins/intelligent-assistant/src/components/McpServersSettings.tsx

Documentation (1) +5 / -0
gentle-foxes-swim.mdAdd patch changeset for MCP settings panel layout fix +5/-0

Add patch changeset for MCP settings panel layout fix

• Adds a patch-level changeset entry documenting the docked/overlay MCP settings panel flex-fill fix and removal of gray borders.

workspaces/intelligent-assistant/.changeset/gentle-foxes-swim.md

@sonarqubecloud

sonarqubecloud Bot commented Aug 9, 2026

Copy link
Copy Markdown

Quality Gate Passed Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

@rhdh-qodo-merge

rhdh-qodo-merge Bot commented Aug 9, 2026

Copy link
Copy Markdown

Code Review by Qodo

🐞 Bugs (0) 📘 Rule violations (0) 📎 Requirement gaps (0)

Grey Divider

Great, no issues found!

Qodo reviewed your code and found no material issues that require review

Grey Divider

Tip of the day 
💡 Did you know, you can ask Qodo to dismiss a finding you disagree with, with your reason on record

More tips ↗ | Customize Qodo ↗ | Qodo docs ↗

Grey Divider

Qodo Logo

@codecov

codecov Bot commented Aug 9, 2026 •
edited
Loading

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 58.33%. Comparing base (db720c2) to head (d6856b8).
✅ All tests successful. No failed tests found.

Additional details and impacted files 
@@           Coverage Diff           @@
##             main    #4213   +/-   ##
=======================================
  Coverage   58.33%   58.33%           
=======================================
  Files        2432     2432           
  Lines       96774    96774           
  Branches    26918    26912    -6     
=======================================
  Hits        56452    56452           
  Misses      38859    38859           
  Partials     1463     1463
Flag Coverage Δ *Carryforward flag
adoption-insights 84.55% <ø> (ø) Carriedforward from db720c2
ai-integrations 69.16% <ø> (ø) Carriedforward from db720c2
app-defaults 69.79% <ø> (ø) Carriedforward from db720c2
augment 46.67% <ø> (ø) Carriedforward from db720c2
boost 76.77% <ø> (ø) Carriedforward from db720c2
bulk-import 72.79% <ø> (ø) Carriedforward from db720c2
cost-management 13.55% <ø> (ø) Carriedforward from db720c2
dcm 67.21% <ø> (ø) Carriedforward from db720c2
extensions 56.59% <ø> (ø) Carriedforward from db720c2
global-floating-action-button 71.18% <ø> (ø) Carriedforward from db720c2
global-header 66.50% <ø> (ø) Carriedforward from db720c2
homepage 47.59% <ø> (ø) Carriedforward from db720c2
install-dynamic-plugins 59.95% <ø> (ø) Carriedforward from db720c2
intelligent-assistant 75.24% <ø> (ø)
konflux 91.98% <ø> (ø) Carriedforward from db720c2
lightspeed 69.02% <ø> (ø) Carriedforward from db720c2
mcp-integrations 83.40% <ø> (ø) Carriedforward from db720c2
orchestrator 66.91% <ø> (ø) Carriedforward from db720c2
quickstart 63.74% <ø> (ø) Carriedforward from db720c2
sandbox 79.56% <ø> (ø) Carriedforward from db720c2
scorecard 86.17% <ø> (ø) Carriedforward from db720c2
theme 88.77% <ø> (ø) Carriedforward from db720c2
translations 5.12% <ø> (ø) Carriedforward from db720c2
x2a 79.20% <ø> (ø) Carriedforward from db720c2

*This pull request uses carry forward flags. Click here to find out more.

Continue to review full report in Codecov by Harness.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update db720c2...d6856b8. Read the comment docs.

🚀 New features to boost your workflow:
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

ciiay
ciiay reviewed Aug 10, 2026
View reviewed changes

@ciiay ciiay left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @rohitratannagar , thanks for the pr 👏
Have you verified it on RHDH? Can you upload the screenshot or screen recording after the fix?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@ciiay ciiay ciiay left review comments
@karthikjeeyar karthikjeeyar Awaiting requested review from karthikjeeyar karthikjeeyar is a code owner
@rohitkrai03 rohitkrai03 Awaiting requested review from rohitkrai03 rohitkrai03 is a code owner
@yangcao77 yangcao77 Awaiting requested review from yangcao77 yangcao77 is a code owner

At least 1 approving review is required to merge this pull request.

Assignees

No one assigned

Labels

Bug fix workspace/intelligent-assistant

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@rohitratannagar @ciiay