Add styles

Author: rebeccaalpert

packages/module/src/Onboarding/Onboarding.scss

@@ -1,4 +1,28 @@
 .pf-chatbot__onboarding-modal {
+  overflow-x: hidden;
+
+  .pf-chatbot__onboarding--title {
+    margin-block-end: var(--pf-t--global--spacer--md);
+  }
+
+  .pf-chatbot__onboarding--section {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+  }
+
+  .pf-chatbot__onboarding--modal-body {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .pf-chatbot__onboarding--modal-text {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+  }
+
   .pf-v6-c-content {
     font-size: var(--pf-t--global--font--size--body--lg);
   }
@@ -8,8 +32,12 @@
     align-items: center;
     justify-content: center;
     flex-direction: column;
-    gap: var(--pf-t--global--spacer--xl);
-    margin-block-start: var(--pf-t--global--spacer--xl);
+    max-height: 65%;
+
+    img {
+      max-width: unset;
+      height: 100%;
+    }
   }
 
   .pf-chatbot__onboarding--title {
@@ -31,12 +59,14 @@
   }
 }
 
-.pf-chatbot__chatbot-modal.pf-chatbot__chatbot-modal--docked.pf-chatbot__onboarding-modal.pf-chatbot__onboarding-modal--docked {
-  .pf-chatbot__onboarding--section {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    height: 100%;
+.pf-chatbot__chatbot-modal.pf-chatbot__chatbot-modal--docked.pf-chatbot__onboarding-modal.pf-chatbot__onboarding-modal--docked,
+.pf-chatbot__chatbot-modal.pf-chatbot__chatbot-modal--fullscreen.pf-chatbot__onboarding-modal.pf-chatbot__onboarding-modal--fullscreen,
+.pf-chatbot__chatbot-modal.pf-chatbot__chatbot-modal--embedded.pf-chatbot__onboarding-modal.pf-chatbot__onboarding-modal--embedded {
+  .pf-chatbot__onboarding--header {
+    img {
+      max-width: 100%;
+      height: auto;
+    }
   }
 }
 

packages/module/src/Onboarding/Onboarding.tsx

@@ -78,38 +78,40 @@ export const OnboardingBase: FunctionComponent<OnboardingProps> = ({
     >
       {/* This is a workaround since the PatternFly modal doesn't have ref forwarding */}
       <section className={`pf-chatbot__onboarding--section`} aria-label={title} tabIndex={-1} ref={innerRef}>
-        <ModalHeader className="pf-chatbot__onboarding--modal-header">
-          <div className="pf-chatbot__onboarding--header">
+        <>
+          <ModalBody className="pf-chatbot__onboarding--modal-body">
             {!isCompact && image && altText && (
-              <img src={image} className="pf-chatbot__onboarding--image" alt={altText} />
+              <div className="pf-chatbot__onboarding--header">
+                <img src={image} className="pf-chatbot__onboarding--image" alt={altText} />
+              </div>
             )}
-            <h1 className="pf-chatbot__onboarding--title">{title}</h1>
-          </div>
-        </ModalHeader>
-        <ModalBody className="pf-chatbot__onboarding--modal-body">
-          <Content>{children}</Content>
-        </ModalBody>
-        <ModalFooter className="pf-chatbot__onboarding--footer">
-          <Button
-            isBlock
-            key="onboarding-modal-primary"
-            variant="primary"
-            onClick={handlePrimaryAction}
-            form="onboarding-form"
-            size="lg"
-          >
-            {primaryActionBtn}
-          </Button>
-          <Button
-            isBlock
-            key="onboarding-modal-secondary"
-            variant="secondary"
-            onClick={handleSecondaryAction}
-            size="lg"
-          >
-            {secondaryActionBtn}
-          </Button>
-        </ModalFooter>
+            <div className="pf-chatbot__onboarding--modal-text">
+              <h1 className="pf-chatbot__onboarding--title">{title}</h1>
+              <Content>{children}</Content>
+            </div>
+          </ModalBody>
+          <ModalFooter className="pf-chatbot__onboarding--footer">
+            <Button
+              isBlock
+              key="onboarding-modal-primary"
+              variant="primary"
+              onClick={handlePrimaryAction}
+              form="onboarding-form"
+              size="lg"
+            >
+              {primaryActionBtn}
+            </Button>
+            <Button
+              isBlock
+              key="onboarding-modal-secondary"
+              variant="secondary"
+              onClick={handleSecondaryAction}
+              size="lg"
+            >
+              {secondaryActionBtn}
+            </Button>
+          </ModalFooter>
+        </>
       </section>
     </ChatbotModal>
   );