Merge pull request #338 from rebeccaalpert/zooming

fix(Chatbot): Handle zoom appropriately
patternfly · Dec 3, 2024 · b0887a6 · b0887a6
2 parents 53e550d + 15bf029
commit b0887a6
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 1 deletion.
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;
+  padding-inline-start: 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-inline-start: 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/FileDropZone/FileDropZone.scss b/packages/module/src/FileDropZone/FileDropZone.scss
@@ -7,6 +7,11 @@
   overflow: hidden;
   display: grid;
   grid-template-rows: 1fr auto;
+
+  // allows for zoom conditions; try zooming to 200% to see
+  @media screen and (max-height: 518px) {
+    overflow-y: auto;
+  }
 }
 
 .pf-chatbot__dropzone--visible.pf-chatbot__dropzone {
@@ -34,3 +39,18 @@
   width: 100%;
   padding: var(--pf-t--global--spacer--md);
 }
+
+.pf-chatbot--default {
+  // allows for zoom conditions; try zooming to 200% to see
+  .pf-chatbot__dropzone--visible.pf-chatbot__dropzone {
+    @media screen and (max-height: 518px) {
+      display: flex;
+      height: 100%;
+      overflow: hidden;
+
+      .pf-v6-c-multiple-file-upload__main {
+        width: 100%;
+      }
+    }
+  }
+}
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 {