[Bug] - [Display mode menu looks broken]

[lboehling]

Description

menu group text is very large (should just receive normal body text size) and corner radius calc looks like its dropping. I suspect there are some custom styles that aren't playing nicely with the 6.5 menu updates?

Steps to Reproduce

https://www.patternfly.org/extensions/chatbot/overview/demo/basic-chatbot (display mode menu)

Data/JSON Context (if applicable)

No response

Environment

No response

Screenshots or Logs

---

Jira Issue: PF-4334

[rebeccaalpert]

We are definitely overriding the corners (bad inheritance from the history drawer menu, which we can fix!) but the font size looks like it's because this variable from PatternFly doesn't exist: font-size: var(--pf-v6-c-menu__group-title--FontSize, inherit);

I don't see it in the CSS variable list anymore - was it removed @mcoker?

[mcoker]

Looks like that was updated in this PR w/ the v6 release to let the group title font-size inherit from the parent, which would presumably be 14px in PF. But looks like .pf-chatbot sets the font-size to 16px so it's inheriting that instead.

chatbot/packages/module/src/Chatbot/Chatbot.scss

Line 15 in d4ea0a4

font-size: var(--pf-t--global--font--size--md);

Easiest thing to do is have an override in chatbot for menu titles using .pf-v6-c-menu { --pf-v6-c-menu__group-title--FontSize: var(--pf-t--global--font--size--body--default); }

If the goal is for some stuff in chatbot to be a larger font (like 16px for example), but patternfly components should mostly be left alone, I might set those specific things in chatbot to 16px instead of on the parent because a lot of patternfly components inherit font-size from their parent. I'm surprised this kind of bug hasn't popped up before.

Patternfly could also set the menu group title font-size to the default font-size, but it could change the font-size of some users' group titles that are relying on the font-size to inherit from the parent. It's probably alright though.

[rebeccaalpert]

Thank you; that sounds like a good fix. Originally they wanted larger fonts, but that may have changed now that it's more of a PatternFly-owned thing. I'll check with design.

[mcoker]

Chatted with @kaylachumley about it this morning and looks like it's not intentional that we would want to set 16px font for things in general for chatbot, so we agreed removing that line of CSS would be ideal. Then we can go through chatbot and make sure everything looks as intended and try to fix any issues that caused. @rebeccaalpert wdyt about that? I can run the visual regression tool in the chatbot repo before/after the change if that's helpful.

[rebeccaalpert]

Works for me @mcoker!