v6 chatbot - Chatbot is showing two scrollbars

[divyanshiGupta]

Chatbot should have only one scrollbar, preferably on the MessageBox component.

Screen.Recording.2024-09-10.at.6.20.39.PM.mov

[asuwebdesign]

Ansible team has also replicated this issue. They're seeing it in Linux/Chrome.

[rebeccaalpert]

@asuwebdesign pointed me to the Ansible team's repo. I was able to pull it down and run it, and saw the double scrollbar issue. They also had buttons, etc. that were not the right shape. I adjusted their imports so these were the very last set of imports in their index.tsx file and the second scrollbar went away:

import '@patternfly/react-core/dist/styles/base.css';
import '@patternfly/patternfly/patternfly-addons.css';

// Add your extension CSS below
import '@patternfly/virtual-assistant/dist/css/main.css';

I'll try to meet with @divyanshiGupta or Rohit next week and see if their issue is the same or has a different cause.

[rebeccaalpert]

I met with Rohit and @divyanshiGupta this morning and they have a different issue. Divyanshi reports that the extra scrollbar is on .pf-chatbot__content. I'm meeting with Karthik on Thursday to see if I can run Developer Hub Lightspeed locally to debug this on their side.

[rebeccaalpert]

@divyanshiGupta - I think this should be fixed on 2.0.0-alpha.37. I pulled this into Lightspeed locally and it looks better to me (some other things look weird though - so I would appreciate it if you guys could let us know if this doesn't work on your side):

Screen.Recording.2024-09-26.at.1.02.23.PM.mov

Thanks for onboarding me!

The release is available on:

GitHub release
npm package (@alpha dist-tag)

[rebeccaalpert]

I think this is ultimately being caused by #175. Going to close this for now since the immediate issue is resolved, but I think CSS problems will continue to get worse for RHDH as this gets more complex.