From e7bfe864a345677cde4e8957d24e155cd28efc12 Mon Sep 17 00:00:00 2001
From: Rebecca Alpert <ralpert@redhat.com>
Date: Fri, 10 Jul 2026 10:39:57 -0400
Subject: [PATCH 1/2] feat(Chatbot): Move scrollbar for embedded

Move scrollbar to far right for embedded layouts only.

Fixes https://github.com/patternfly/chatbot/issues/886
---
 packages/module/src/MessageBox/MessageBox.scss | 16 +++++++++++++++-
 packages/module/src/MessageBox/MessageBox.tsx  |  5 ++++-
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/packages/module/src/MessageBox/MessageBox.scss b/packages/module/src/MessageBox/MessageBox.scss
index e300b4586..4dea5a88e 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 192fbb41b..36a36b6d8 100644
--- a/packages/module/src/MessageBox/MessageBox.tsx
+++ b/packages/module/src/MessageBox/MessageBox.tsx
@@ -47,6 +47,8 @@ export interface MessageBoxProps extends HTMLProps<HTMLDivElement> {
   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 +117,7 @@ export const MessageBox = forwardRef(
       jumpButtonBottomProps,
       jumpButtonBottomTooltipProps,
       jumpButtonTopTooltipProps,
+      hasOuterScrollbar = false,
       ...props
     }: MessageBoxProps,
     ref: ForwardedRef<MessageBoxHandle | null>
@@ -433,7 +436,7 @@ export const MessageBox = forwardRef(
           role="region"
           tabIndex={0}
           aria-label={ariaLabel}
-          className={`pf-chatbot__messagebox ${position === 'bottom' ? 'pf-chatbot__messagebox--bottom' : ''} ${className ?? ''}`}
+          className={`pf-chatbot__messagebox ${position === 'bottom' ? 'pf-chatbot__messagebox--bottom' : ''} ${hasOuterScrollbar ? 'pf-chatbot__messagebox--outer-scroll' : ''} ${className ?? ''}`}
           ref={messageBoxRef}
           {...props}
           {...(enableSmartScroll ? { ...smartScrollHandlers } : {})}

From ab97968c7bac2b85bed397148037c570e44e1a1e Mon Sep 17 00:00:00 2001
From: Rebecca Alpert <ralpert@redhat.com>
Date: Mon, 10 Aug 2026 11:02:15 -0400
Subject: [PATCH 2/2] Add class helper

---
 packages/module/src/MessageBox/MessageBox.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/module/src/MessageBox/MessageBox.tsx b/packages/module/src/MessageBox/MessageBox.tsx
index 36a36b6d8..675f87a65 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<HTMLDivElement> {
   /** Content that can be announced, such as a new message, for screen readers */
@@ -436,7 +437,12 @@ export const MessageBox = forwardRef(
           role="region"
           tabIndex={0}
           aria-label={ariaLabel}
-          className={`pf-chatbot__messagebox ${position === 'bottom' ? 'pf-chatbot__messagebox--bottom' : ''} ${hasOuterScrollbar ? 'pf-chatbot__messagebox--outer-scroll' : ''} ${className ?? ''}`}
+          className={css(
+            'pf-chatbot__messagebox',
+            position === 'bottom' && 'pf-chatbot__messagebox--bottom',
+            hasOuterScrollbar && 'pf-chatbot__messagebox--outer-scroll',
+            className
+          )}
           ref={messageBoxRef}
           {...props}
           {...(enableSmartScroll ? { ...smartScrollHandlers } : {})}