fix(intelligent-assistant): MCP settings panel fills space in docked/overlay mode (RHDHBUGS-3576) by rohitratannagar · Pull Request #4213 · redhat-developer/rhdh-plugins

rohitratannagar · 2026-08-09T19:30:03Z

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

before fix

After fix (in rhdh-local)

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

…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>

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 · 2026-08-09T19:30:27Z

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 · 2026-08-09T19:31:15Z

PR Summary by Qodo

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

🐞 Bug fix 🕐 20-40 Minutes

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

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

rhdh-qodo-merge · 2026-08-09T19:33:17Z

Code Review by Qodo

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

Great, no issues found!

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

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 ↗

codecov · 2026-08-09T19:34:48Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 58.37%. Comparing base (db720c2) to head (056ac71).
⚠️ Report is 35 commits behind head on main.
✅ All tests successful. No failed tests found.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #4213      +/-   ##
==========================================
+ Coverage   58.33%   58.37%   +0.03%     
==========================================
  Files        2432     2433       +1     
  Lines       96774    96916     +142     
  Branches    26918    26946      +28     
==========================================
+ Hits        56452    56570     +118     
- Misses      38859    38883      +24     
  Partials     1463     1463

Flag	Coverage Δ		*Carryforward flag
adoption-insights	`84.55% <ø> (ø)`		Carriedforward from d6856b8
ai-integrations	`69.16% <ø> (ø)`		Carriedforward from d6856b8
app-defaults	`69.79% <ø> (ø)`		Carriedforward from d6856b8
augment	`46.67% <ø> (ø)`		Carriedforward from d6856b8
boost	`76.77% <ø> (ø)`		Carriedforward from d6856b8
bulk-import	`72.79% <ø> (ø)`		Carriedforward from d6856b8
cost-management	`13.55% <ø> (ø)`		Carriedforward from d6856b8
dcm	`67.21% <ø> (ø)`		Carriedforward from d6856b8
extensions	`56.59% <ø> (ø)`		Carriedforward from d6856b8
global-floating-action-button	`71.18% <ø> (ø)`		Carriedforward from d6856b8
global-header	`66.50% <ø> (ø)`		Carriedforward from d6856b8
homepage	`47.59% <ø> (ø)`		Carriedforward from d6856b8
install-dynamic-plugins	`59.95% <ø> (ø)`		Carriedforward from d6856b8
intelligent-assistant	`75.42% <ø> (+0.18%)`	⬆️
konflux	`91.98% <ø> (ø)`		Carriedforward from d6856b8
lightspeed	`69.02% <ø> (ø)`		Carriedforward from d6856b8
mcp-integrations	`83.40% <ø> (ø)`		Carriedforward from d6856b8
orchestrator	`66.91% <ø> (ø)`		Carriedforward from d6856b8
quickstart	`63.74% <ø> (ø)`		Carriedforward from d6856b8
sandbox	`79.56% <ø> (ø)`		Carriedforward from d6856b8
scorecard	`86.17% <ø> (ø)`		Carriedforward from d6856b8
theme	`88.77% <ø> (ø)`		Carriedforward from d6856b8
translations	`5.12% <ø> (ø)`		Carriedforward from d6856b8
x2a	`79.20% <ø> (ø)`		Carriedforward from d6856b8

*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...056ac71. 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

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

…tings panel The Settings wrapper elements were using --pf-t--global--background--color--primary--default which diverges from the chatbot's --floating--default token in dark mode, causing a visible dark strip below the MCP servers table content. Co-authored-by: Cursor <cursoragent@cursor.com>

sonarqubecloud · 2026-08-11T17:07:43Z

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

rohitratannagar · 2026-08-11T18:35:07Z

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

Updated in the UI (tested in rhdh-local) !!

ciiay

Thanks for the PR 👏

Verified this fix on app-next and the issue no longer exists on docked and overlay mode.

/lgtm

rohitratannagar and others added 2 commits August 10, 2026 00:40

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>

rohitratannagar requested review from a team, karthikjeeyar, rohitkrai03 and yangcao77 as code owners August 9, 2026 19:30

github-actions Bot added the workspace/intelligent-assistant label Aug 9, 2026

rhdh-qodo-merge Bot added the Bug fix label Aug 9, 2026

ciiay reviewed Aug 10, 2026

View reviewed changes

rohitratannagar requested a review from ciiay August 11, 2026 18:36

ciiay approved these changes Aug 11, 2026

View reviewed changes

openshift-ci Bot assigned ciiay Aug 11, 2026

openshift-ci Bot added the lgtm label Aug 11, 2026

ciiay merged commit 549abd8 into redhat-developer:main Aug 11, 2026
26 checks passed

Navigation Menu

Uh oh!

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

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

rohitratannagar commented Aug 9, 2026 •

edited

Loading

Uh oh!

rhdh-gh-app Bot commented Aug 9, 2026

Uh oh!

rhdh-qodo-merge Bot commented Aug 9, 2026

Uh oh!

rhdh-qodo-merge Bot commented Aug 9, 2026

Uh oh!

codecov Bot commented Aug 9, 2026 •

edited

Loading

Uh oh!

ciiay left a comment

Uh oh!

sonarqubecloud Bot commented Aug 11, 2026

Uh oh!

rohitratannagar commented Aug 11, 2026

Uh oh!

ciiay left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

rohitratannagar commented Aug 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Fixed

before fix

After fix (in rhdh-local)

Root Cause

Changes

Checklist

Uh oh!

rhdh-gh-app Bot commented Aug 9, 2026

Changed Packages

Uh oh!

rhdh-qodo-merge Bot commented Aug 9, 2026

PR Summary by Qodo

Uh oh!

rhdh-qodo-merge Bot commented Aug 9, 2026

Code Review by Qodo

Great, no issues found!

Uh oh!

codecov Bot commented Aug 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

ciiay left a comment

Choose a reason for hiding this comment

Uh oh!

sonarqubecloud Bot commented Aug 11, 2026

Quality Gate passed

Uh oh!

rohitratannagar commented Aug 11, 2026

Uh oh!

ciiay left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

rohitratannagar commented Aug 9, 2026 •

edited

Loading

codecov Bot commented Aug 9, 2026 •

edited

Loading