Refactor CSS for assistant component: adjust media queries and container widths for better responsiveness

Author: bendichter

docs/source/_static/css/nwb_assistant.css

@@ -26,7 +26,8 @@
     display: none;
 }
 
-@media (min-width: 1300px) {
+/* Show assistant on screens 768px and wider */
+@media (min-width: 768px) {
     .assistant-toggle {
         display: block;
     }
@@ -37,7 +38,7 @@
         position: fixed;
         right: 0;
         top: 0;
-        width: calc(100vw - 1140px);
+        width: 400px;
         height: 100vh;
         z-index: 1000;
         transform: translateX(100%);
@@ -60,7 +61,50 @@
         transition: margin-right 0.3s ease-in-out;
     }
 
+    .assistant-container.show ~ .wy-nav-content {
+        margin-right: 400px;
+    }
+}
+
+/* For larger screens, use more available space */
+@media (min-width: 1300px) {
+    .assistant-container {
+        width: calc(100vw - 1140px);
+    }
+
     .assistant-container.show ~ .wy-nav-content {
         margin-right: calc(100vw - 1140px);
     }
 }
+
+/* For mobile devices, make assistant full-screen overlay */
+@media (max-width: 767px) {
+    .assistant-toggle {
+        display: block;
+    }
+
+    .assistant-container {
+        display: block;
+        visibility: hidden;
+        position: fixed;
+        right: 0;
+        top: 0;
+        width: 100vw;
+        height: 100vh;
+        z-index: 1000;
+        transform: translateX(100%);
+        transition: transform 0.3s ease-in-out, visibility 0.3s ease-in-out;
+    }
+
+    .assistant-container.show {
+        visibility: visible;
+        transform: translateX(0);
+    }
+
+    .assistant-iframe {
+        width: 100%;
+        height: 100%;
+        border: none;
+        background: white;
+    }
+}