diff --git a/packages/module/src/Chatbot/Chatbot.scss b/packages/module/src/Chatbot/Chatbot.scss
index 604fe947..a3e204ed 100644
--- a/packages/module/src/Chatbot/Chatbot.scss
+++ b/packages/module/src/Chatbot/Chatbot.scss
@@ -21,6 +21,18 @@
   &--hidden {
     pointer-events: none;
   }
+
+  // 32 rem is the width of the overlay chatbot plus the insets
+  // if the screen is smaller, we want to be 100%
+  @media screen and (max-width: 32rem) {
+    width: 100vw;
+    inset-inline-end: 0;
+  }
+
+  // allows for zoom conditions; try zooming to 200% to see
+  @media screen and (max-height: 518px) {
+    overflow: auto;
+  }
 }
 
 // ============================================================================
@@ -34,10 +46,22 @@
   border-radius: 0;
   box-shadow: var(--pf-t--global--box-shadow--lg--left);
   overflow: inherit;
+
+  // 30rem is the width of the docked chatbot
+  // if the screen is smaller, we want to be 100%
+  @media screen and (max-width: 30rem) {
+    width: 100%;
+  }
 }
 
 html.pf-chatbot-allow--docked {
   padding-right: 480px;
+
+  // 30rem is the width of the docked chatbot
+  // if the screen is smaller, we want to be 100%
+  @media screen and (max-width: 30rem) {
+    padding-right: 0px;
+  }
 }
 
 // ============================================================================
@@ -76,6 +100,11 @@ html.pf-chatbot-allow--docked {
   &--hidden {
     pointer-events: none;
   }
+
+  // allows for zoom conditions; try zooming to 200% to see
+  @media screen and (max-height: 518px) {
+    overflow: auto;
+  }
 }
 
 .pf-chatbot-container--embedded {
diff --git a/packages/module/src/ChatbotContent/ChatbotContent.scss b/packages/module/src/ChatbotContent/ChatbotContent.scss
index 1cac665e..7ed88cf1 100644
--- a/packages/module/src/ChatbotContent/ChatbotContent.scss
+++ b/packages/module/src/ChatbotContent/ChatbotContent.scss
@@ -7,6 +7,11 @@
   overflow-y: auto;
   overflow: hidden; // needed in Red Hat Developer Hub workspace
   flex: 1; // needed in Composer AI
+
+  // allows for zoom conditions; try zooming to 200% to see
+  @media screen and (max-height: 518px) {
+    overflow: unset;
+  }
 }
 
 // ============================================================================
diff --git a/packages/module/src/MessageBox/JumpButton.scss b/packages/module/src/MessageBox/JumpButton.scss
index f9f302c3..db5255da 100644
--- a/packages/module/src/MessageBox/JumpButton.scss
+++ b/packages/module/src/MessageBox/JumpButton.scss
@@ -43,4 +43,9 @@
   &--bottom {
     inset-block-end: var(--pf-t--global--spacer--md) !important;
   }
+
+  // allows for zoom conditions; try zooming to 200% to see
+  @media screen and (max-height: 518px) {
+    display: none;
+  }
 }
diff --git a/packages/module/src/MessageBox/MessageBox.scss b/packages/module/src/MessageBox/MessageBox.scss
index dee88603..d511f072 100644
--- a/packages/module/src/MessageBox/MessageBox.scss
+++ b/packages/module/src/MessageBox/MessageBox.scss
@@ -7,6 +7,16 @@
   flex-direction: column;
   row-gap: var(--pf-t--global--spacer--sm);
   padding: var(--pf-t--global--spacer--lg);
+
+  // 32 rem is the width of the overlay chatbot plus the insets
+  // if the screen is smaller, we want to be 100%
+  @media screen and (max-width: 32rem) {
+    width: 100%;
+  }
+  // allows for zoom conditions; try zooming to 200% to see
+  @media screen and (max-height: 518px) {
+    overflow-y: visible;
+  }
 }
 
 .pf-chatbot__messagebox--bottom > :first-child {