fix(Chatbot): Handle zoom appropriately

Allows entire chatbot to scroll like a normal website when zoom is high. Hides jump links since they won't work. Also adds responsive styles to chatbot on docked and overlay.
patternfly · Nov 25, 2024 · 2e0e521 · 2e0e521
1 parent 3552c88
commit 2e0e521
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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 {