diff --git a/packages/module/src/MessageBox/MessageBox.scss b/packages/module/src/MessageBox/MessageBox.scss index e300b458..4dea5a88 100644 --- a/packages/module/src/MessageBox/MessageBox.scss +++ b/packages/module/src/MessageBox/MessageBox.scss @@ -24,7 +24,6 @@ } @media screen and (min-width: 64rem) { - .pf-chatbot--embedded, .pf-chatbot--drawer, .pf-chatbot--fullscreen { .pf-chatbot__messagebox { @@ -32,6 +31,21 @@ width: 100%; } } + + /* + * Moves the scrollbar; see https://github.com/opendatahub-io/odh-dashboard/pull/8199 + */ + .pf-chatbot--embedded .pf-chatbot__messagebox.pf-chatbot__messagebox--outer-scroll { + width: 100%; + max-width: unset; + align-items: center; + } + + .pf-chatbot--embedded .pf-chatbot__messagebox.pf-chatbot__messagebox--outer-scroll > *:not(.pf-chatbot__messagebox-announcement) { + max-width: 60rem; + width: 100%; + } + } .pf-chatbot.pf-m-compact { diff --git a/packages/module/src/MessageBox/MessageBox.tsx b/packages/module/src/MessageBox/MessageBox.tsx index 192fbb41..675f87a6 100644 --- a/packages/module/src/MessageBox/MessageBox.tsx +++ b/packages/module/src/MessageBox/MessageBox.tsx @@ -19,6 +19,7 @@ import { } from 'react'; import JumpButton from './JumpButton'; import { ButtonProps, getResizeObserver, TooltipProps } from '@patternfly/react-core'; +import { css } from '@patternfly/react-styles'; export interface MessageBoxProps extends HTMLProps { /** Content that can be announced, such as a new message, for screen readers */ @@ -47,6 +48,8 @@ export interface MessageBoxProps extends HTMLProps { jumpButtonTopTooltipProps?: TooltipProps; /** Props passed to top jump button tooltip */ jumpButtonBottomTooltipProps?: TooltipProps; + /** Whether scrollbar is on the page or message box in embedded mode */ + hasOuterScrollbar?: boolean; } export interface MessageBoxHandle extends HTMLDivElement { @@ -115,6 +118,7 @@ export const MessageBox = forwardRef( jumpButtonBottomProps, jumpButtonBottomTooltipProps, jumpButtonTopTooltipProps, + hasOuterScrollbar = false, ...props }: MessageBoxProps, ref: ForwardedRef @@ -433,7 +437,12 @@ export const MessageBox = forwardRef( role="region" tabIndex={0} aria-label={ariaLabel} - className={`pf-chatbot__messagebox ${position === 'bottom' ? 'pf-chatbot__messagebox--bottom' : ''} ${className ?? ''}`} + className={css( + 'pf-chatbot__messagebox', + position === 'bottom' && 'pf-chatbot__messagebox--bottom', + hasOuterScrollbar && 'pf-chatbot__messagebox--outer-scroll', + className + )} ref={messageBoxRef} {...props} {...(enableSmartScroll ? { ...smartScrollHandlers } : {})}