Add responsive breakpoints.

vectara · Feb 23, 2024 · 9e67870 · 9e67870
1 parent cd1db4b
commit 9e67870
Showing 1 changed file with 15 additions and 13 deletions.
diff --git a/src/components/chatView.scss b/src/components/chatView.scss
@@ -183,17 +183,19 @@ $chatbotPosition: $sizeS;
   padding: $sizeXxxs $sizeXxs;
 }
 
-// Responsive Styles
 // Make the Chatbot window take the full screen at small screen widths.
-// @media (max-width: 480px) {
-//   .vrcbChatbotWrapper.vrcbChatbotWrapper-isOpen {
-//     bottom: 0;
-//     height: 100%;
-//     right: 0;
-//     width: 100%;
-//   }
-
-//   .vuiSearchInput--m.vuiSearchInput > .vuiSearchInput__input {
-//     font-size: $fontSizeMedium;
-//   }
-// }
+@media (max-width: 700px) {
+  .vrcbChatbotWrapper {
+    right: 0;
+    width: 100vw;
+    max-width: 100vw;
+  }
+}
+
+@media (max-height: 900px) {
+  .vrcbChatbotWrapper {
+    bottom: 0;
+    height: 100vh;
+    max-height: 100vh;
+  }
+}